使用 jQuery 给自己的 WordPress 添加看图功能，这个 fancybox 插件功能还是不错的，添加的时候也简单
前言
在我们网站经常会添加图片文件，由于版面的问题，图片经常会被缩放，如果是大图的话可能无法看清楚，在这里，我们使用这个弹出层插件就可以查看完整图了
素材准备
下载文章底部的素材文件，解压之后放在主题的根目录，就是主题根目录/fancybox/ 这样的结构，里面是一个 CSS 文件和一个 JS 文件，以及四个小图片
代码部署
在主题footer.php文件里面body标签前面添加以下代码
<!-- 加载 Fancybox JS 文件 -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/fancybox.js"></script>
<!-- 加载 jQuery 文件,如果已经加载了，可以删除 -->
<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#showdiv").fancybox({'centerOnScroll':true});
});
</script>
然后再header.php文件的header标签内，引入插件的样式
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/fancybox/fancybox.css" />
然后结束了吗？还没呢，接下来在主题的函数文件function.php里面添加代码
//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;
}
然后，OVER
使用
使用的时候非常简单，在插入图片的时候选择媒体文件就可以了，其实就是给图片添加个 A 标签而已
如果是添加外链的话也可以的，选择图片 URL 就可以了
简单吧，而且你第一次添加之后，以后都是默认添加到图片的，不需要每次都设置的 
强烈注意，代码部署完毕，然后清理网站缓存！！！！！！！！！！
预览
点击这里加载本页中一个隐藏的 DIV。
相关链接
文件下载-- 完 --
扫码订阅，第一时间获得更新
微信扫码二维码，订阅我们网站的动态，另外不定时发送 WordPress 小技巧，你可以随时退订，欢迎订阅哦~
