有朋自远方来,不亦乐乎。
纯代码wordpress加入fancybox暗箱效果
原创 橘子书  发布于 2年前 ( 2017-06-29 ) 阅读: 2,924 次 评论: 15 条 A+

前阶段佳能兄问我怎么实现文章页图片的效果。

其实教程很简单,只需要引入几个文件、以及几段代码便能实现该功能。

DEMO

暗箱效果

(点击弹窗)

教程

1.下载文件,将其放到主题根目录


文件下载
文件名称:fancybox
作者信息:fancybox
最后更新:2017年6月29日
下载地址:点击进入下载
演示地址:点击查看演示

2.打开functions文件,在最后一个?>前扔进以下代码:

//fancybox图片灯箱效果
add_filter('the_content', 'fancybox');
function fancybox ($content)
{ global $post;
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 rel="box" class="fancybox"$6>$7</a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

3.打开header.php文件,在</head>标签前面,添加以下代码,引入css:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/fancybox/fancybox.css" />

使用过程中,如果发现没有关闭按钮左右按钮,说明fancybox.css里面的素材路径写错了,注意打开将其修改为与自身主题吻合的路径即可。

4.打开footer.php文件,在</body>标签前面,添加以下代码,引入js:

	<!-- 加载 Fancybox JS文件 -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/fancybox.js"></script> 
<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
                $("#showdiv").fancybox({'centerOnScroll':true});
	});
</script>

如果主题没有加载过任何jquery.js,那么需要在第2、3行之间加载该文件:

<script src="jquery.js文件的真实路径"></script>

<!–路径可以是以下任一版本的文件–>

//百度压缩版

http://libs.baidu.com/jquery/2.0.0/jquery.min.js

//微软压缩版

http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js

//官网压缩版(目前官网最新版好像是3.1.1,将下面的2.0.0替换一下即可)

http://code.jquery.com/jquery-2.0.0.min.js

部署教程到此,END。

使用

插入图片的时候,一定要有<a>标签,不然没有暗箱效果。即:【添加多媒体】→【上传图片或媒体库】→选中图片→点击【插入至文章】之前,选择【附件显示设置】链接到【媒体文件】。

庭说

暗箱效果最大的作用,其实不单单是美观大气,更多的用途在于减少加载原图(按需加载,只有点击了图片才会弹窗原图),所以我们在插入图片的时候,最好是选择裁剪好的小尺寸,然后链接到媒体文件。

这样一来,打开文章的时候,加载的是小图;点击图片的时候,加载的是原图。

补充·20170809

fancybox是可以升级的,而且最新版比老版本更强大,它不仅更大气美观,而且可以图片全屏跟拖动。

升级方法不难,其实就是下载最新的文件包。然后用里面的js、css文件,替换旧版本的旧文件(顺便将旧版本的图片删掉,因为新版不需要用到关闭、左右按钮的图片。)

Ps:新版的fancybox文件很大,唔,至少比旧版本大一半,所以是否决定升级,要按需考虑。

下载完文件包,打开后会发现一个dist文件夹,里面的四个文件就是我们所需的文件。其中要注意的是,带min命名的文件是压缩版,在替换的过程当中,请务必要保证——新旧文件,名称一致!

Principle Team
龙砚庭官方QQ群,一个坚持强怼的7P成员群!
10人已关注

目前评论:15   其中:访客  8   博主  7

发表评论

莫慌,小狮子正在努力加载评论...
  1. 明月登楼
    明月登楼3 ( 2017.07.01 17:29:57 )  8楼

    不错,不过,没有看出特色在哪里呀!

  2. BanYuner
    BanYuner1 ( 2017.07.01 10:41:51 )  7楼

    貌似很久之前就有这个功能了吧 我很久之前也使用过,但是后来还是没有使用

  3. WordPress头条
    WordPress头条1 ( 2017.06.30 21:07:56 )  6楼

    哎呦,不错哦