目 录

FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自定义外观。原先黑糖主题里是带有这个灯箱的,只不过显示的效果过于简单,从悟空博客分享的文章里,重新折腾了一下,如今图片的显示效果还是挺好看。

FancyBox特点:
1、允许我们用鼠标滚轮 或者 键盘上的四个方向键切换图片。
2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放了。
3、支持缩略图和按钮帮助导航。
4、弹出框支持显示多种类型的内容(图片,html,视频……)。
5、灯箱中按 ‘F’ 键快捷切换查看原图。

下载fancybox所需文件

下载后解压,得到css,img,js三个文件夹,将这三个文件夹上传至主题根目录。本站提供的下载文件:fancybox-2.1.7

引入下载的JS、css文件

本站用的是黑糖的主题,所以在functions.php里找到加载css的函数块,加入

在主题main.js中添加以下代码

创建灯箱实例,并设置相关效果等,为了能让之前的文章图片也有灯箱效果,加入了文章图片添加fancybox-buttons的样式。

在主题的functions.php中添加一个自定义函数,重写文章中图片链接a标签的class属性

其实不用这一段也可以,因为上面已经添加了触发灯箱的重写,问题是如果你发的文章含有分页内容,并且是AJAX加载的话,还是要加上这一段才行,在发分页文章时,图片要选链接到媒体。

fancybox显示效果