调用 WP 的 Thickbox 实现 Lightbox 效果
Thickbox 是基于 jQuery 的类 Lightbox 插件,简单易用,我们可以很方便的在主题中调用 WordPress 自带的 Thickbox 来实现 Lightbox 效果,无需任何插件。
方法很简单,在 header.php 的 <?php wp_head(); ?> 之前,添加下列代码:
<?php wp_enqueue_script(‘jquery’); ?>
<link rel=”stylesheet” href=”/wp-includes/js/thickbox/thickbox.css” type=”text/css” media=”screen” />
然后你就可以利用下面的代码为图片或其他内容添加 Lightbox 效果(效果如图):
代码为:
<a href=”图片URL” title=”标题” class=”thickbox”><img src=”缩略图URL” alt=”" /></a>
在编辑内容并上传图片时,由于 WordPress 已经生成缩略图,实际所需的只是将图片插入文章,并在自动生成的代码中添加 class=”thickbox” 而已。
如果遇到关闭按钮无法显示的情况,可以将 /wp-includes/js/thickbox/thickbox.js 这一文件中的头两行代码:
var tb_pathToImage = “../wp-includes/js/thickbox/loadingAnimation.gif”;
var tb_closeImage = “../wp-includes/js/thickbox/tb-close.png”;
中的 “..” 改为绝对路径。
或者在 <?php wp_head(); ?> 之后,</head> 之前加入下述代码:
<script type=”text/javascript”>
var tb_pathToImage = “加载动画的URL”;
var tb_closeImage = “关闭按钮图片的URL”;
</script>
更多的例子请参见官方页面。
This entry is filed under jQuery, thickbox, Wordpress. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

很帅很帅,学习了。
馬上就可以實現了,
厲害!
我用你的theme就可以实现,
但试用其它的theme就不能实现?
@小ko:
与哪个主题无关的, 代码总是类似的。
I love your themes!
Regards
Joachim
我添加代码之后怎么有时候显示出来的是两张图片呢?
您好,我首先按照您说的方法来改了header.php,加入图片,没有效果。按照官方的方法也修改了,还是没有效果。。。。求助啊
@Pfau:
我看了你的站点,似乎是有用的,浏览器是ff3。
我用了你的模板就有用……用其他模板再调用就没成功过。。。。。
@Pfau:
其实跟主题没关系,我的主题也是这样加上去的,我一直在找这文章是不是漏写了什么,但是没找到-_-
为什么我添加图片之后达不到你这样的效果呢?点击缩略图直接就打开了原图,而不是在原来页面上弹出原图。
这招还真不知道···
最近好像都不怎么更新了,很忙?
找了很久了,不错,学习了。
博客怎么最近不更新啦!
这个博客主题很赞~
我试了一下落 非常不错的效果
嗯,学习一下
楼主这效果超级炫啊,图片是牛头人酋长吗?
[...] (原文链接:http://xuyiyang.com/2008/08/11/using-thickbox-in-wordpress-themes/) [...]
很不错的教程,回头去试试看。