给文章页增加图片Fancybox灯箱效果/支持放大自动播放等

今天推荐一款功能强大的非插件灯箱效果—-Fancybox,支持图片放大,图片列表等,功能强大且移动端支持非常棒!

FancyBox 简单介绍

Fancybox 是一个 JavaScript 库,用于以优雅的方式呈现图像,视频和任何 HTML 内容。它具有您期望的所有功能 – 触摸启用,响应和完全可定制。

依赖

jQuery 3+ 是首选,但 fancyBox 适用于 jQuery 1.9.1+ 和 jQuery 2+
兼容性

fancyBox 包括对触控手势的支持,甚至支持缩放手势。它非常适合手机和桌面浏览器。
特点

移动第一:每个设备上看起来不错;支持最常见的触控手势-双击,捏放和捏出来的图像浏览; 水平滑动进行导航。
多个实例:它可以打开一个模式,而另一种是仍然可见。
快速和简易安装:就在两个文件,无需编写 JavaScript 代码一行来实现。
自动内容识别:支持最流行的网站诸如 YouTube,Vimeo 的和谷歌地图的开箱。
GPU 加速:硬件加速的动画有更好的表现。
响应:设置使用任何 CSS 单位,浏览器将完成剩下的内容维度;所有的图形,包括加载图标,仅与 CSS 创建。

Fancybox 3 官方使用教程

说明:其实使用方法很简单,就是在文件头(如主题内的 header.php 文件)中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件(可以使用以上代码中的链接,或者直接下载后上传到所使用主题文件夹内再添加),而 jquery-3.2.1.min.js 文件一般不用理会,因为大部分 WordPress
查看更多关于 WordPress 的文章
站点都已经引入有 jQuery 库了。

接着只需要给我们站点文章内图片的链接添加 data-fancybox 属性即可,还可以使用 data-caption 属性添加标题。例如:

为文章页内的图片链接添加 data-fancybox 属性可以使用函数自动添加,只需要将以下代码添加到当前主题的functions.php 文件最后一个 ?> 的前面即可。

Github开源地址:https://github.com/fancyapps/fancyBox
作者网站:https://fancyapps.com/fancybox/3/docs/

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!

2. 分享目的仅供大家学习和交流,请不要用于商业用途!

3. 如果你也有好Wordpress主题、Wordpress插件或者教程,可以到审核区发布,分享有金币奖励和额外收入!

4. 本站提供的主题、插件、教程等等其他资源,都不包含技术服务 请大家谅解!

5. 如遇到加密压缩包,默认解压密码为lingshan.info,如遇到无法解压的请联系管理员!


凌山博客 » 给文章页增加图片Fancybox灯箱效果/支持放大自动播放等