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

好像百度移动落地页检测要求文章图片可以放大缩小、左右滑动等功能，其实这个应该就是我们平时我们说的弹窗功能了。估计很多图片弹窗功能都是通过 fancybox 实现，其中 WordPress 的教程比较多，比如『给 WordPress 文章图片添加 Fancybox 3 灯箱效果教程』。今天 OZABC 就跟大家说一下 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" 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" 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 href=\""+this.src+"\" data-fancybox=\"images\" class=\"cboxElement\" rel=\"example_group\"></a>");
}
});
});
</script>

以上代码的意思如下：

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

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

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