好像百度移动落地页检测要求文章图片可以放大缩小、左右滑动等功能,其实这个应该就是我们平时我们说的弹窗功能了。估计很多图片弹窗功能都是通过 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>
以上代码的意思如下:
- 第一段代码意思是如果图片已经带有链接地址的,检查是否为图片地址,如果是就添加 fancybox 相关图片属性以便实现弹窗功能。
- 第二段代码意思是如果图片没有带有链接地址,就直接为该图片添加带有 fancybox 相关图片属性的图片链接地址以便实现弹窗功能。
4. 如果站点开启有缓存或者使用 CDN 的话,清空缓存后就可以让文章页中的图片具有弹窗功能,即可以点击放大、缩小、左右滑动等功能。ZBlogPHP 主题修改文件或升级主题之后一定要记得点击后台的【清空缓存并重新编译模板】按钮清空缓存。具体效果请参考:传送门
其实本文的关键就是第三步,通过 JS 来判断图片是否带链接地址,然后添加 fancybox 相关图片属性。所以说,本文的方法不单单适用于 ZBlogPHP 站点,也适用于 WordPress、Typecho 等其他建站程序。应该可以说是真正的通用版本吧。
本文ZBlogPHP站点如何添加fancybox图片弹窗功能?到此结束。做人像水自然顺,做事像山必然胜。小编再次感谢大家对我们的支持!