专栏首页沈唁志纯代码给你的网站增加图片灯箱效果,增强落地页体验

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

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

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

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

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

实现加入 FancyBox 灯箱效果教程

1、引入相关文件

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

请先在header.php文件的标签前引入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.phpfooter.php文件中

3.初始化 fancybox

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

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

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

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

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

更多配置项查看文档

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 修改Git全部Commit提交记录的用户名Name和邮箱Email

    这两天好不容易有空提交一下开源代码了,结果在公司提交的代码有记录,但是没有绿色,延迟?真的要凉

    沈唁
  • Python中的分支语句和循环语句及案例

    沈唁
  • 使用腾讯 AI 开放平台,打造极致产品

    腾讯提供的 AI 开放平台功能还是很多的,并由腾讯三大 AI 实验室提供强大的技术基石

    沈唁
  • hexo 搭建博客

    通常我们可以使用github pages 来搭建静态博客,建立一个username.github.io的项目就可以了,如果要将其他项目也作为页面展示,可以将代码...

    苏生不惑
  • Java工具集-布尔(BooleanUtil)

    cwl_java
  • 使用SQLServer同义词和SQL邮件,解决发布订阅中订阅库丢失数据的问题

    最近给客户做了基于SQLServer的发布订阅的“读写分离”功能,但是某些表数据很大,经常发生某几条数据丢失的问题,导致订阅无法继续进行。但是每次发现问题重新做...

    用户1177503
  • Wolfram语言新特性:Cryptography

    WolframChina
  • 避免HBase PageFilter踩坑,这几点你必须要清楚 ​

    不同于RDBMS天然支持分页查询,HBase要进行分页必须由自己实现。据我了解的,目前有两种方案, 一是《HBase权威指南》中提到的用PageFilter加循...

    李红
  • 训练集(Training dataset)

    在机器学习中,一般将样本分成独立的三部分训练集(train set),验证集(validation set)和测试集(test set)。其中,训练集用于建立模...

    easyAI
  • 【批处理学习笔记】第二十一课:数值计算

        批处理里面的数值计算功能较弱,只能够进行整型计算,忽略浮点数的小数部分;同时数值计算的范围也受限于系统位数,对于目前较为常见的32位机来说,数值计算能处...

    Angel_Kitty

扫码关注云+社区

领取腾讯云代金券