Fancybox介绍
Fancybox 是一个 依赖于JQuery的JavaScript 库,用于以优雅的方式呈现图像,视频和任何 HTML 内容。它具有您期望的所有功能 – 触摸启用,响应和完全可定制。
依赖
兼容性
- fancyBox 包括对触控手势的支持,甚至支持缩放手势。它非常适合手机和桌面浏览器。
特点
- 移动第一:每个设备上看起来不错;支持最常见的触控手势-双击,捏放和捏出来的图像浏览; 水平滑动进行导航。
- 多个实例:它可以打开一个模式,而另一种是仍然可见。
- 快速和简易安装:就在两个文件,无需编写 JavaScript 代码一行来实现。
- 自动内容识别:支持最流行的网站诸如 YouTube,Vimeo 的和谷歌地图的开箱。
- GPU 加速:硬件加速的动画有更好的表现。
- 响应:设置使用任何 CSS 单位,浏览器将完成剩下的内容维度;所有的图形,包括加载图标,仅与 CSS 创建。
fancybox官方引入教程
1.添加jQuery和fancyBox文件
<!-- 加载jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- 加载 FancyBox -->
<link href="/path/to/jquery.fancybox.min.css" rel="stylesheet">
<script src="/path/to/jquery.fancybox.min.js"></script>
2.创建图片链接,给图片的链接添加 data-fancybox 属性
<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>
WordPress修改方法
- 此方法适用于大多数主题~
文章页内的图片链接添加 data-fancybox
属性可以使用函数自动添加,只需要将以下代码添加到当前主题的functions.php
文件最后一个 ?>
的前面即可。(此段代码会自动识别文章内的图片并自动添加上data-fancybox
属性)
/* ================================================== fancybox图片灯箱效果 2019年9月18日22:35:05 ================================================== */ add_filter('the_content', 'fancybox1'); add_filter('the_content', 'fancybox2'); function fancybox1($content){ global $post; $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>'; $content = preg_replace($pattern, $replacement, $content); return $content; } function fancybox2($content){ global $post; $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>'; $content = preg_replace($pattern, $replacement, $content); return $content; }
接下来就是引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件(7b2还需引入jQuery)
<!-- 建议使用cdn链接,因为比较快233 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> <!-- 7b2主题请引入下面的的JQuery (其他不带有JQuery的主题也一样 基本上都有 7b2用的vue比较特殊 -_- ) --> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
博主还在官方找到了插件,但是没有去测试,能尽量不折腾就不折腾吧
插件地址:https://cn.wordpress.org/plugins/w3dev-fancybox/
厉害???
6666666666666666666666