
AEOMO网站文章图片之前是集成了Auto Highslide灯箱效果插件到主题了的,但是这个效果在手机端体验一般。于是莫莫决定让站长改成Fancybox灯箱效果来展示图片,Fancybox还可以呈现视频和HTML格式内容,手机端浏览网页点击图片还具有触摸功能,手势缩放查看图片细节,可定制的响应式功能满足用户的期望。
Fancybox3灯箱插件官方使用教程
Fancybox代码安装非常简便,就两个文件直接调用就能实现,一个JavaScript代码文件和一个CSS层叠样式表。之前的Auto Highslide在手机端没有手势随意缩放功能,直接放大后会出现版面错乱问题,而用Fancybox灯箱插件集成到wordpress网站主题里刚好可以解决这个问题。我们先来看下官方的简单代码安装介绍。
<!-- 1. Add latest jQuery and fancyBox files --> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <link rel="stylesheet" rel="external nofollow" target="_blank" href="https://www.aeomo.com/wp-content/themes/aeo/go.php?url=aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvZmFuY3lib3gvMy4yLjUvanF1ZXJ5LmZhbmN5Ym94Lm1pbi5jc3M=" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script> <!-- 2. Create links --> <a href="big_1.jpg" data-fancybox="gallery"><img src="small_1.jpg" /></a> <a href="big_2.jpg" data-fancybox="gallery"><img src="small_2.jpg" /></a> <!-- 3. Have fun! -->
Fancybox官方介绍使用方法很简单,第一步直在接主题header.php
文件头部中引入jquery-3.2.1.min.js后,接着调用jquery.fancybox.min.css
和 jquery.fancybox.min.js
这两个文件即可,如何您的站点都已经引入有jQuery库的其它版本也可以不用再引入3.2.1这个文件。其实你也可以把fancybox的js和css这两个文件另存网页下载到你的主题根目录下,再用相对路径地址调用也可以。下一步是要给我们网站文章的每个图片链接添加data-fancybox属性即可,这里这样使用自动函数全站添加,下面会说到。
<a href="image.jpg" data-fancybox="" data-caption="My caption"><img src="“thumbnail.jpg”" alt="“My caption" /></a>
纯代码实现wordpress主题集成Fancybox灯箱
如何把已集成的Auto Highslide改为Fancybox灯箱效果,这里以大前端的DUX主题举例,那么第一步就是先把该主题之前集成的Auto Highslide灯箱插件去掉。首先把functions.php
里的以下代码删除或注释掉:
//集成auto-highslide灯箱插件 add_filter('the_content', 'addhighslideclass_replace'); function addhighslideclass_replace ($content) { global $post; $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i"; $replacement = '<a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6>$7'; $content = preg_replace($pattern, $replacement, $content); return $content; }
然后再把footer.php
里的以下代码删除或注释掉:
<?php if(is_single()):?> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/highslide/highslide.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { hs.graphicsDir = "<?php bloginfo('template_url'); ?>/highslide/graphics/"; hs.outlineType = "rounded-white"; hs.dimmingOpacity = 0.8; hs.outlineWhileAnimating = true; hs.showCredits = false; hs.captionEval = "this.thumb.alt"; hs.numberPosition = "caption"; hs.align = "center"; hs.transitions = ["expand", "crossfade"]; hs.addSlideshow({ interval: 5000, repeat: true, useControls: true, fixedControls: "fit", overlayOptions: { opacity: 0.75, position: "bottom center", hideOnMouseOut: true } }); }); </script> <?php endif;?>
经过上面两步操作原本调用的highslide灯箱就不起作用了,接着我们重新集成Fancybox灯箱到主题中,第一步把下面的代码复制到当前主题的functions.php
文件最后一个 ?> 的前,其实把它放在刚刚删掉或注释掉的代码上面即可。这段代码就是上面官方介绍方法中,为全站文章页内的图片链接自动添加data-fancybox属性的函数。如果想要同时支持有a标签的文章和没有a标签的文章,自动识别给图片添加a标签,那就使用第二段代码。
//集成fancybox图片灯箱效果灯箱插件 add_filter('the_content', 'fancybox'); function fancybox($content){ global $post; $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf|mp4)('|\")(.*?)>(.*?)<\/a>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images" $6>$7'; $content = preg_replace($pattern, $replacement, $content); return $content; }
add_filter('the_content', 'fancybox1'); add_filter('the_content', 'fancybox2'); function fancybox1($content){ global $post; $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6>'; $content = preg_replace($pattern, $replacement, $content); return $content; } function fancybox2($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'; $content = preg_replace($pattern, $replacement, $content); return $content; }
第二步就是在接主题header.php
头部中引入fancybox文件,如需要jquery也引入就把注释去掉即可,最终效果可以参照AEOMO网站里的文章图片展示效果。
<!-- <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> --> <link rel="stylesheet" href="/wp-content/themes/DUX/fancybox/3.2.5/jquery.fancybox.min.css" /> <script src="/wp-content/themes/DUX/fancybox/3.2.5/jquery.fancybox.min.js"></script>