文章

为WordPress添加FancyBox灯箱效果

Fancybox给网站带来非常赞的浏览效果,FancyBox 图片灯箱效果不仅可以点击图片放大,而且还支持幻灯片播放、全屏查看、缩略图列表以及分享照片的功能。最厉害连移动端的适配都做了,Lightbox 在移动端是不能自适应的。

效果图

FancyBox 简单介绍

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

依赖

  • jQuery 3+ 是首选,但 fancyBox 适用于 jQuery 1.9.1+ 和 jQuery 2+

兼容性

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

特点

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

第一:添加最新的 jQuery 和 fancybox 文件

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /><script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

第二:对图像链接改造,添加 data-fancybox="gallery"到链接里面

<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>

FancyBox 如何部署集成到 WordPress 主题

第一:下载 Fancybox 代码,在文件头(如主题内的 header.php 文件)中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件(可以使用以上代码中的链接,或者直接下载后上传到所使用主题文件夹内再添加),而 jquery-3.2.1.min.js 文件一般不用理会,因为大部分 WordPress 站点都已经引入有 jQuery 库了。 我直接使用的CND,直接复制就可以

<!--fancybox--> 
<link href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet"> 
<script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>

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

//FancyBox图片灯箱
add_filter('the_content', 'fancybox');
function fancybox($content){ 
$pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
$replacement = array('<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

暂无评论

发表评论