纯代码集成Fancybox灯箱图片效果到网站主题

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>