SYS 棚户区

WordPress 非插件使用 Fancybox 3

sys2017-05-13 23:202 条评论网络百科FancyBox

大约去年这会儿写过一篇 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 = { … } 字段下查找。更详细的使用方法及示例可以到组件官网查看。