用代码代替wordpress插件实现wordpress图片暗箱功能!

以前收藏过一篇wordpress点击图片放大美化插件Auto Highslide的文件,今天收藏另一篇图片暗箱功能,效果十分绚丽呢。效果见示例。

首先在主题文件的header.php里添加以下调用代码:

<!-- 加载 Fancybox CSS文件 -->
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/fancybox/fancybox.css" />
 <!-- 加载 jQuery JS文件(如果模版文件已经加载jQuery,无需加入此段代码) -->
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/jquery-1.9.0.min.js"></script>
 <!-- 加载 Fancybox JS文件 -->
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/fancybox.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
 $(".fancybox").fancybox();
 });
 </script>

然后找到主题文件下的functions.php 文件,将以下内容添加至?>之前

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;
 }

最后下载FancyBox文件包解压后放到主题文件的根目录下后,全部保存。。。