皇家元林

我找了很多关于wp图片特效的插件，WP FancyZoom、Lightbox 2等等，我的老板还是不满意，他需要那种跟QQ空间里的差不多，点开图片，放大，然后还可以上一个下一个图片预览的效果。折腾了这么久，我才发现在wp世界里，这个效果叫Lightbox特效。于是我就Google之。

在一外国网站发现用jQuery给网站加这个特效，我突然有了想法，把他用在wp里也不错的。具体操作如下：
1、下载素材，点这里。
2、把里面的CSS文件夹、js文件夹和images文件夹上传到你的主题目录。
3、修改jquery.lightbox-0.5.js文件，在30行的位置，或者搜索“imageLoading:”后面有几个图片的路径，将其改成绝对路径，此图片也是第2步里images文件里面的。因为这个相对路径很容易出现无法显示图片的错误。比如images/lightbox-ico-loading.gif修改成http://hjyl.org/wp-content/themes/yleave/images/lightbox-ico-loading.gif。
4、在head标签里加上这句：

1
2

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.lightbox-0.5.js"></script>

如果你的主题有jQuery库，第一句就可以删掉。
接着下面加上：

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
$(function() {
	$('a').lightBox(); //给所有的链接加上lightbox特效
          //或者......
	$('.wp-caption a').lightBox(); //给wp-caption标签加上lightbox特效
          //或者......
	$('.gallery a').lightBox(); //给gallery标签加上lightbox特效
});
</script>

这个根据需要选择。
5、忘了重要的一步，加上CSS样式，在style.css文件里加上这句即可：

1

@import "css/jquery.lightbox-0.5.css";

2011年3月28日，即今天，我杯具地发现一款Slimbox插件，跟这效果一样，JS体积小到只有几KB，可惜没有自适应窗口大小功能！