欢迎光临
我们一直在努力

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 属性来定义每张图片的描述,属性值就是描述内容,会显示在灯箱图片的底部。

示例:


四、使用 JavaScript 初始化

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

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

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

赞(0) 打赏
未经允许不得转载:哈哈 » WordPress 非插件使用 Fancybox 3

评论 抢沙发

更好的WordPress主题

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

联系我们联系我们

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册