纯代码给你的网站增加图片灯箱效果，增强落地页体验

SEO优化 · WordPress / 更新于 / 23 条评论 /

灯箱效果是我一直想加又没有加的功能，正好最近百度在推移动落地页检测，顺手做一下优化

我的检测结果是：您的页面可能存在图片不可全屏查看，全屏查看后不可缩放/左右滑动的问题，影响落地页体验

我们可以直接使用FancyBox来完成我们的需求，FancyBox是一款优秀的弹出框Jquery插件

1、允许我们用鼠标和键盘上的四个方向键切换图片
2、可以根据当前窗口大小自动调整弹出框的大小，当我们改变浏览器窗口大小时，将会看到弹出框自动缩放
3、支持缩略图列表、放大、全屏等功能
4、弹出框支持显示多种类型的内容：图片、html、视频…
5、支持触控、缩放手势操作图片

实现加入FancyBox灯箱效果教程

1、引入相关文件

可以将FancyBox的js、css文件下载到主题目录中进行引入，这里我们直接使用CDN外链

请先在header.php文件的head标签前引入Jquery文件

<script type='text/javascript' src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>

如果存在就跳过(大部分应该都有)，然后在footer.php文件的标签前引入FancyBox的js、css文件

<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />
<script type="text/javascript" src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js"></script>

2、增加data-fancybox属性

这里分为两种情况，一种为之前插入图片的时候，添加过<a>标签

即：【添加多媒体】→【上传图片或媒体库】→选中图片→点击【插入至文章】之前，选择【附件显示设置】链接到【媒体文件】

需要将以下代码添加到当前主题的functions.php文件中

// fancybox3图片添加 data-fancybox 属性
add_filter('the_content', 'fancybox');
function fancybox ($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;
}

另外一种是从来没有添加过<a>标签的，我们使用js自动添加链接到原图

$(function() {
   $(".entry-content p img").each(function(i) {
      if (!this.parentNode.href) {
         $(this).wrap("<a href='" + this.src + "' data-fancybox='fancybox' data-caption='" + this.alt + "'></a>")
      }
   })
});

.entry-content p img需要修改为你自己网站的图片正文的CSS类，这上面js代码加入到header.php或footer.php文件中

3.初始化fancybox

一切加载完成后，就可以初始化FancyBox了，在刚才引入的FancyBox的js、css文件下面增加

$(document).ready(function() {
   $("[data-fancybox]").fancybox()
});

如果一切顺利，那么你的网站现在点击图片就可以看到图片灯箱效果，不满意默认效果？那就来自定义配置吧

在初始化的时候增加配置，比如这个样子：

$(document).ready(function() {
   $("[data-fancybox]").fancybox({
      protect:true, // 禁用右键保存
   })
});

更多配置项查看文档吧

今天查看落地页检测已经可以通过～




沈唁志 任何个人或团体，未经允许禁止转载本文：《纯代码给你的网站增加图片灯箱效果，增强落地页体验》，谢谢合作！
赞赏
alipay支付宝赞赏
wechat微信赞赏

如果给您解决燃眉之急或带来些许明朗，您可以打赏一杯咖啡或一杯香茗

23 条评论

发表评论

*