SYS 棚户区

WordPress 非插件使用 Fancybox 3

大约去年这会儿写过一篇 WordPress 非插件使用 Fancybox 2，简要记录了这款图片灯箱组件的使用步骤。前几天偶然打开这个组件的 Github 地址，发现 master 分支更新时间是两个月前，版本号是 3.0.47。马上去组件官网瞅了一眼，发现 v3 版本已经赫然发布。只是官网发布的是 3.0 版，而 Github 上的最新分支是 3.1 版，所以以我这么爱追新的习惯当然选择了 v3.1。

v3.1 的使用方法跟 v2 相差无几，区别在于控制显示样式、动画效果的参数选项有些变化，这里就再记录一下。

一、准备必要的文件

点击下载

解压 dist 目录中的 jquery.fancybox.min.css 及 jquery.fancybox.min.js 文件并放到主题目录中，这里以我把它们放到“TEMPLATEPATH/plugins/fancybox”为例，下一步需要将它们引入。

二、引入相关的 js 以及 css 文件

可以参照这篇文章的第二节。

三、配置网站中的图片使其适应 FancyBox

同样可参照这篇文章的第三节。不同的是 a 标签添加的不再是 class 属性，而是 data-fancybox 属性，属性值可以为空，也可以任意填写。在一个页面中，data-fancybox 属性值相同的几张图片被组件划分为一个分组（group），它们可以在同一个灯箱中展示。给 a 标签添加 data-caption 属性来定义每张图片的描述，属性值就是描述内容，会显示在灯箱图片的底部。

示例：

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

四、使用 JavaScript 初始化

实际测试，按照顺序做完上面三步即可在单击图片时调用 Fancybox v3.1 的灯箱了。不过通过这第四步可以修改灯箱组件的默认选项设置。使用 jQuery 选择器选择带有 data-fancybox 属性的元素并调用 fancybox 方法，来给该元素绑定 fancyBox 事件：

$("[data-fancybox]").fancybox({
	// 这里是选项
});

要查看详细的选项列表，可以打开代码包 dist 目录的 jquery.fancybox.js 文件，到 var defaults = { … } 字段下查找。更详细的使用方法及示例可以到组件官网查看。