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

tengxunyun cera

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

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

我们可以直接使用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, // 禁用右键保存
   })
});

按上面步骤操作完毕,您现在可以看到如本站一样的效果。

cera aliyun tengxunyun cloudiplc

相关推荐

纯代码为WordPress站点添加倒计时功能

久伴觉得这个教程很实用,特别是发布某些活动,是活动肯定有截止日期,所以博客在发布活动类型的文章底部添加一个活动结束倒计时还是不错的-本文来源:boke112导航 纯代码添加倒计时到 WordPress 1、把下面的代码保存为 countdownjs.js,保存在当前所使用主题的 js/目录里: function getAdd(time){ if(time<10){ return “0”+time; }else{ return time; } } var interval = 1000; function ShowCountDown(year,month,day,hourd,minuted){ var now = new Date(); var endDate = new Date(year, month–1, day, hourd, minuted); var leftTime = endDate.getTime() – now.getTime(); var leftsecond = parseInt(leftTime/1000); var day = Math.floor(leftsecond/(60*60*24)); day = day < 0 ? …

纯代码为网站站点添加雪花飘落效果

还有一周就是圣诞节了,现在出去街上基本上都有一些圣诞节的气氛 人在外地,一个人也不怎么出去,也就对圣诞节不怎么感冒,还是给博客搞搞气氛 前端滑稽上线~贴代码 <script type=”text/javascript”> (function($){ $.fn.snow = function(options){ var $flake = $(‘<div id=”snowbox” />’).css({‘position’: ‘absolute’,’z-index’:’9999′, ‘top’: ‘-50px’}).html(‘&#10052;’), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize : 10, maxSize : 20, newOn : 1000, flakeColor : “#AFDAEF” /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */ }, options = $.extend({}, defaults, options); var interval= setInterval( function(){ var startPositionLeft = …

ServerTrafficweb|乌克兰VPS|月付€11.99|1核|1G内存|20G SSD|无限流量|100Mbps|KVM|三网不饶美|特殊做站|无视DMCA

美国商家#ServerTrafficweb#今天在WHT论坛发布了#最新OFF#,推广他家的#乌克兰小鸡#,主打#无视DMCA#(版权忽略),最低配置为1核,1G内存,20G SSD硬盘,无限流量@100M带宽,月付€11.99欧元,路由方面,测试了下,#三网不绕美#,适合用来做站,有需要的可以考虑。具体请查看Offer: UKRAINE VPS #1 1v CPU 1GB RAM 20 GB SSD Storage Unmetered Bandwidth #100Mbps Uplink# 1x IPv4 100% DMCA Ignored €11.99 /month 点击购买 UKRAINE VPS #2 2v CPU 2GB RAM 30 GB SSD Storage #Unmetered Bandwidth# 100Mbps Uplink 1x IPv4 KVM Virtualisation Self Managed 100% DMCA Ignored €17.99 /month 点击购买 Looking Glass 乌克兰,#基辅# …

Gbpscloud|洛杉矶VPS|1核|512M内存|5G HDD|500G单向流量|600M端口|KVM|$12.31|安畅机房|电信联通GIA CN2|能看Netflix美区

#国人#商家Gbpscloud今天在TG上发来了最新OFF,他家的洛杉矶LAX2和上海CN2都促销一波,其中最低配的是1核,512M内存,5G硬盘,500G#单向#流量@600M带宽,适用优惠码后,月付约$12.31美元,机房为洛杉矶#安畅#,电信联通去程和回程走#GIA# CN2,移动去程直连,测试了下IP可以看Netflix美区,其他视频网站还没测试,从目前在售的几家安畅来说,性价比还是可以的,有需要的可以考虑一下。具体请查看Offer: 优惠信息: 1,循环88折#优惠码#,适用于购买洛杉矶:2EB98CNR9D 2,免安装费,适用于购买上海CN2:AJB58N2J9G   LAX Plan  Core CPU 1 RAM 512 MB HDD Storage 5 GB 1 IPv4 labeled as US (MaxMind) 500 GB Outbound Traffic 600Mbps Port Speed $12.31 /month(需使用优惠码:2EB98CNR9D ) 点击购买     LAX Plan 2 Core CPU 1 RAM 1 GB HDD Storage 10 GB 1 IPv4 labeled as US (MaxMind) …

微信扫一扫,分享到朋友圈

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