简单实现WordPress主题的图片FancyBox灯箱特效

FancyBox是一款优秀的jquery插件,它能够展示丰富的弹出层效果。技术宅刚刚更换了Justnews主题,这主题其他都好,就是暂时没有图片灯箱效果,这让技术宅有一点点的难受,于是就自己简单配置了下,很轻松就实现了图片灯箱!
简单实现WordPress主题的图片FancyBox灯箱特效

操作步骤

1、下载FancyBox源码包

[btn type=”primary” url=”https://shaozhiwei.com/wenjianFGCnZTuYQF/fancybox.zip”]源码下载[/btn]

2、将下载解压好的源码用FTP上传到网站目录,这里技术宅以网站根目录为例!

将以下代码放入主题footer.php上面:

<link rel="stylesheet" type="text/css" href="https://jszbug.com/fancybox/jquery.fancybox.css" />灯箱源码实际目录
<script src="https://jszbug.com/fancybox/jquery.fancybox.js"></script>灯箱源码实际目录
<script type="text/javascript">
$(document).ready(function() {	
	$(".fancybox").fancybox();
});
</script>

注意:如果主题使用的是wordpress内置的jQuery库,则需要把 $(document).ready(function() 改成 jQuery(document).ready(function($),如果当前主题没有引用jQuery库,请自主引用版本1.9以上的jquery库。

4、编辑当前主题的functions.php文件,在<?php下面添加以下代码:

add_filter('the_content', 'lightbox_gall_replace', 99);
function lightbox_gall_replace ($content) {
	global $post;
	$pattern = "/<a(.*?)href=('|\")([A-Za-z0-9\/_\.\~\:-]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?)>/i";
	$replacement = '<a$1href=$2$3$4$5$6 class="fancybox" data-fancybox-group="button">';
	$content = preg_replace($pattern, $replacement, $content);
	return $content;
}

这样就可以简简单单实现图片FancyBox灯箱效果了!

拓展阅读

其实关于FancyBox,大家可以去度娘找找,有很多好玩的特效,有需要的可以自行参考配置,一般配置都是在上面步骤中的第二步配置的!

技术分享

应用场景深度解析:Nignx性能优化指南

2017-11-23 23:31:41

技术分享

MySQL配置的“修改条令”

2017-12-2 14:00:08

    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
站点地图