皇家元林

位置: 首页 > 用jQuery给WP加上lightbox特效

用jQuery给WP加上lightbox特效

Mar 2011 26

我找了很多关于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标签里加上这句:



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


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

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

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

--转载请注明: 皇家元林 » 用jQuery给WP加上lightbox特效

4条评论

  1. #-19

    这个很实用,有空试试

  2. #-18

    嗯嗯,你喜欢拍照片,正好用上。。

  3. #-17

    写博客已经不用wordpress了,比较臃肿,还是喜欢轻便的typecho!你买的VPS啥时候上线啊?

  4. #-16

    呵呵,我很喜欢wordpress!
    VPS还在折腾中。。。

  5. 发表评论

    (必填)

    2686