ZBlogPHP站点如何添加fancybox图片弹窗功能?

赶快上路吧,不要有一天我们在对方的葬礼上说,要是当时去了就好了。

好像百度移动落地页检测要求文章图片可以放大缩小、左右滑动等功能,其实这个应该就是我们平时我们说的弹窗功能了。估计很多图片弹窗功能都是通过 fancybox 实现,其中 WordPress 的好代码教程比较多,比如『给 WordPress 文章图片添加 Fancybox 3 灯箱效果好代码教程』。今天 boke112 就跟大家说一下 ZBlogPHP 站点如何添加 fancybox 图片弹窗功能(其实本文好代码教程适合所有博客网站,不单单是适合于 ZBlogPHP)。

1. 点此下载 fancybox解压后将 dist 文件夹中的 jquery.fancybox.css 和 jquery.fancybox.js(或 jquery.fancybox.min.css 和 jquery.fancybox.min.js)上传到所使用的主题文件目录中。

2. 在所使用主题的 header.php 文件的</head>前面引用 fancybox 的 CSS 文件和 JS 文件,可参考以下代码:

<link rel="stylesheet" id="font-awesome-four-css" rel="nofollow noopener noreferrer" href="{$host}zb_users/theme/{$theme}/jquery.fancybox.css" type='text/css' media='all'/>
<script src="{$host}zb_users/theme/{$theme}/script/jquery.fancybox.js" type="text/javascript"></script>

特别提醒:如果你不想将 fancybox 的 CSS 文件和 JS 文件存放到本地,可以直接忽略本文步骤 1 和步骤 2,直接在主题 header.php 文件的</head>前面添加以下代码:

<link rel="stylesheet" rel="nofollow noopener noreferrer" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>

注意:不管是引用 CDN 上的文件还是本地文件,都需要确保站点引用了 jquery.js 文件,一般 ZBlogPHP、WordPress 等站点都会引用这个文件。如果站点确实没有引用这个文件,请在主题 header.php 文件的</head>前面添加以下代码:

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

3. 在主题 footer.php 文件的</body>前面添加以下代码:

<script type="text/javascript">
const regx = /\.(jpe?g|png|bmp|gif|swf)(?=\?|$)/i;
$('.single-content').find('a').each(function(){
const href = $(this).attr('href');
const isImg = regx.test(href);
if (isImg) {
$(this).attr({'data-fancybox':'images','class':'cboxElement','rel':'example_group'});
}
});

$(document).ready(function(){
//图片自动链接
$('.single-content img').each(function(i){
if (! this.parentNode.href){
$(this).wrap("<a rel="nofollow noopener noreferrer" href=\""+this.src+"\" data-fancybox=\"images\" class=\"cboxElement\" rel=\"example_group\"></a>");
}
});
});
</script>
请注意:请根据自己站点文章页的 class 值修改以上代码中的.single-content,如果使用的是ZBlogPHP 免费主题 zbpNana或Blogs(最新版 2.0 已经集成有这个功能无需重新折腾)则可以直接使用。

以上代码的意思如下:

  • 第一段代码意思是如果图片已经带有链接地址的,检查是否为图片地址,如果是就添加 fancybox 相关图片属性以便实现弹窗功能。
  • 第二段代码意思是如果图片没有带有链接地址,就直接为该图片添加带有 fancybox 相关图片属性的图片链接地址以便实现弹窗功能。

4. 如果站点开启有缓存或者使用 CDN 的话,清空缓存后就可以让文章页中的图片具有弹窗功能,即可以点击放大、缩小、左右滑动等功能。ZBlogPHP 主题修改文件或升级主题之后一定要记得点击后台的【清空缓存并重新编译模板】按钮清空缓存。具体效果请参考:传送门

其实本文的关键就是第三步,通过 JS 来判断图片是否带链接地址,然后添加 fancybox 相关图片属性。所以说,本文的方法不单单适用于 ZBlogPHP 站点,也适用于 WordPress、Typecho 等其他建站程序。应该可以说是真正的通用版本吧。

本文ZBlogPHP站点如何添加fancybox图片弹窗功能?到此结束。做人像水自然顺,做事像山必然胜。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
ZBlogPHP网站如何更换域名?附详细步骤图文好代码教程

ZBlogPHP文章和页面如何添加canonical标签?

ZBlogPHP免费主题Blogs如何隐藏后台登录地址?

ZBlogPHP的浏览量可以修改吗?怎么修改默认浏览量?

ZBlogPHP免费响应式主题Blogs如何修改title结构?