创意模板视频素材
软件工具网络教程

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

AEMOM网站文章图片之前是集成了Auto Highslide灯箱效果插件到主题了的,但是这个效果在手机端体验一般。于是莫莫决定让站长改成Fancybox灯箱效果来展示图片,Fancybox还可以呈现视频和HTML格式内容,手机端浏览网页点击图片还具有触摸功能,手势缩放查看图片细节,可定制的响应式功能满足用户的期望。

纯代码集成Fancybox灯箱图片效果到网站主题高清图-第1张

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" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<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.cssjquery.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也引入就把注释去掉即可,最终效果可以参照AEMOM网站里的文章图片展示效果。

<!-- <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>
本文共计3889字,阅读完成预计会占用您10分钟。 您在本页面已停留: 百度未收录
转载请注明:AEMOM » 纯代码集成Fancybox灯箱图片效果到网站主题
赞(1) 打赏 分享

发表评论 抢沙发

1 + 0 =
  • (必填)
  • (必填)
  • (选填)

感谢热心朋友们的打赏

支付宝扫一扫打赏

微信扫一扫打赏