洛杉矶MC机房 高速低价18元起

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

提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。点击下载【谷歌浏览器最新绿色便携版】
注意:部分文章发布时间较长,可能存在未知因素,购买时建议在本站搜索商家名称,先充分了解商家动态。
交流:唯一投稿QQ80059284、唯一投稿邮箱:admin@bkvps.com、网友交流QQ群号640669696。

灯箱效果是我一直想加又没有加的功能,正好最近百度在推移动落地页检测,顺手做一下优化我的检测结果是:您的页面可能存在图片不可全屏查看,全屏查看后不可缩放/左右滑动的问题,影响落地页体验我们可以直接使用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.php或footer.php文件中3.初始化 fancybox一切加载完成后,就可以初始化FancyBox了,在刚才引入的FancyBox的 js、css 文件下面增加$(document).ready(function() { $(“[data-fancybox]”).fancybox()});如果一切顺利,那么你的网站现在点击图片就可以看到图片灯箱效果,不满意默认效果?那就来自定义配置吧在初始化的时候增加配置,比如这个样子:$(document).ready(function() { $(“[data-fancybox]”).fancybox({ protect:true, // 禁用右键保存 })});按上面步骤操作完毕,您现在可以看到如本站一样的效果。

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:贝壳主机网 » 纯代码给你的网站增加图片灯箱效果,增强落地页体验

分享到: 生成海报
香港/美国/国内高速VPS
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活