当前位置:首页 > 分类 > 网络百科 > 文章内容

大约去年这会儿写过一篇 WordPress 非插件使用 Fancybox 2,简要记录了这款图片灯箱组件的使用步骤。前几天偶然打开这个组件的 Github 地址,发现 master 分支更新时间是两个月前,再看插件的版本已经是 3.0.47 了。立刻去组件官网确认,的确已经有了 v3 版本。而组件 Github 地址的最新分支的版本号是 3.1,高于官网发布的 3.0 版本,所以以我这么爱追新的个性肯定还是选择了 v3.1。

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

一、准备必要的文件

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

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

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

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

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

四、使用 JavaScript 初始化

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

<script type="text/javascript">
	$("[data-fancybox]").fancybox({
		// 这里是选项
	});
</script>

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

本页链接:https://www.syshut.com/use-fancybox3-on-wordpress.html | SYS 棚户区
文章标签:

WordPress 非插件使用 Fancybox 3快来发表评论吧!

发表评论



快捷键:Ctrl + Enter