当前位置:首页 > 分类 > 网络百科 > 文章内容

对于网站的图片灯箱效果,我使用过一段时间 Auto HighSlide 插件,感觉还是不错的。用久了发现有些小细节不太符合自己的使用习惯,才想起之前的用过的 FancyBox for WordPress 插件。这个插件用起来还算比较顺手,不过试了下安装以后在目前的主题上无法使用。请教威言威语后找到了问题所在,原因是主题禁用了 WordPress 自带的 jQuery 库输出,而插件自身的 js 链接输出是依赖于被禁用 jquery-migrate.min.js 文件的。解决方法比较简单,只要将这个 jquery-migrate.min.js 文件链接在 header.php 中输出一下就可以了。

插件可以使用了,但发现这款插件是基于 2010 年 11 月 11 日发布的 FancyBox 1.3.4 版本,距今近六年了。于是顺藤摸瓜,在 FancyBox 网站找到了 FancyBox 2。这算是 FancyBox 的升级版吧,虽然 2013 年发布至今也有 3 年左右了,不过总归比 1.x.x 版本要新一些。摸索着在没有现成插件的情况下把它添加到了自己的网站上,这里记录下大致的思路。

一、准备必要的文件

FancyBox 2 官网下载 FancyBox 2.1.5 代码包。

解压其中的 source 文件夹到 WordPress 的主题目录中,可以把它重命名为 fancybox。这里以“主题目录/plugins/fancybox”为例,jquery.fancybox.pack.js 文件应该位于该目录。

 二、引入相关的 js 以及 css 文件

在 header.php 中的 head 标签内添加下面代码:

<!-- 引入 css -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/plugins/fancybox/jquery.fancybox.css">

<!-- 引入 js -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/plugins/fancybox/jquery.fancybox.pack.js"></script>

如果首页中的文章摘要不需要使用 Fancybox 组件,可以用:

<?php if ( is_singular() ) : ?>
	<!-- 这里是引入文件代码 -->
<?php endif; ?>

包裹上述代码,使其只在“文章”和“页面”页输出。

三、配置网站中的图片使其适应 FancyBox

将需要启用灯箱效果的图片添加指向自身的链接,如:

<a href="https://syshut-com.bj.bcebos.com/2016/05/fbsrc.png">
	<img src="https://syshut-com.bj.bcebos.com/2016/05/fbsrc.png" />
</a>

FancyBox 的 js 代码会识别链接中 a 标签内相应的 id 或 class 属性,根据这些属性的值为其渲染出相应的效果。使用 WordPress 文章编辑器插入的图片默认是不带有这些属性的,就如上面的形式,所以可以用下面这段代码来实现批量添加的功能:

<?php
//add class
function pirobox_auto( $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" ' . $post->ID . '>';
	$content = preg_replace( $pattern, $replacement, $content );
	return $content;
}
add_filter( 'the_content', 'pirobox_auto', 99 );
?>
四、激活 FancyBox 并配置灯箱效果

万事俱备,只欠东风。现在需要一段代码激活 FancyBox 的功能,并配置淡入淡出、上翻下翻、按钮控制等的显示效果。示例如下:

$(document).ready(function(){
	$(".fancybox").fancybox({
		// 这里是效果代码
	});
});

注意引号中的 .fancybox 要与第三步中的 class 或 id 属性值相应。

另:这款插件的使用吸取了一些网友的经验,但网友们的文章大多比较粗略,并没有一篇教程能参照着从头到尾做下来而成功的。本文经 sys 总结而成,对网友的分享深表感谢,在此不一一列举。

本页链接:https://www.syshut.com/use-fancybox2-on-wordpress.html | SYS 棚户区
文章标签:

微信扫一扫,打赏作者吧~

支付宝扫一扫,打赏作者吧~

WordPress 非插件使用 Fancybox 2快来发表评论吧!

发表评论



快捷键:Ctrl + Enter