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

 2019-07-04 07:26:11  40 人阅读  4 条评论

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

ZBlogPHP站点如何添加fancybox图片弹窗功能? ZBlog 第1张

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>
请注意:请根据自己站点文章页的 class 值修改以上代码中的.single-content,如果使用的是ZBlogPHP 免费主题 zbpNanaBlogs(最新版 2.0 已经集成有这个功能无需重新折腾)则可以直接使用。

以上代码的意思如下:

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

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

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

您可能感兴趣的文章

文章标签:
本文地址:https://boke112.com/6954.html
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机

 发表评论

强表情无奈表情抠鼻表情笑哭表情偷笑表情衰表情流汗表情奋斗表情吐血表情抓狂表情晕表情流泪表情疑问表情呲牙表情惊讶表情鼓掌表情

  1. 魏义齐个人博客
    魏义齐个人博客 @回复

    fancybox最新版没有全屏功能,移动落地页检测依然是不通过,可否将贵站fancybox的js和css整理一下分享出来了,官方找不到旧版本

  2. OUIMS博客
    OUIMS博客 @回复

    终于又更新zblog教程了,感谢大神,学习到了 [强]

  3. 暗潮
    暗潮 @回复

    好久没来了,一来就有新教程。这个不错,回头试试。