FancyBox2图片效果完美支持WordPress

Jonty

2013-09-07 / 2 评论 / 99 阅读 / 正在检测是否收录...

09/07

FancyBox2是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该lightbox除了能够展示图片之外，还可以展示iframed内容，通过css自定义外观。

功能介绍

可以支持图片、html文本、flash动画、iframe以及ajax的支持。可以自定义播放器的CSS样式。可以以组的形式进行播放。支持鼠标滚轮滚动来翻阅图片。 Fancybox播放器支持投影，更有立体的感觉。

一：下载 Fancybox 文件，上传至主题目录中。
[butdown href="http://pan.baidu.com/share/link?shareid=2963173146&uk=1547026424" target="_blank"]FANCYBOX2下载地址[/butdown]

二：在主题文件 header.php 或者 single.php 中加入如下代码
将代码加入在 header.php 文件中，整个网站都将支持Fancybox，包括首页、自定义页面等；将代码加入在single.php 文件中，Fancybox 只在文章单页中加载，这样做可以增加首页访问速度，Fancybox JS文件只有48KB，速度提升也并不是很明显。

<!-- 加载 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 中加入如下代码
这段代码是给带有链接的图片自动添加fancybox属性，以便正常加载fancybox效果

add_filter('the_content', 'fancybox');
function fancybox ($content)
{ global $post;
$pattern = "/&amp;lt;a(.*?)href=('|\")([^&amp;gt;]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)&amp;gt;(.*?)&amp;lt;\/a&amp;gt;/i";
$replacement = '&amp;lt;a$1href=$2$3.$4$5 rel="box"$6&amp;gt;$7&amp;lt;/a&amp;gt;';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

在6月26号更新的fancybox已经自动关联图片，毋须这个啦。如果想对图片进行分组，例如上面例图可以左右选择浏览图片或者用鼠标滚轮滚动来翻阅图片，需要手动在链接后加入 rel=“demo1″；“demo1″ 是分组名称，如果在同一篇文章中有多个分组，需要修改名称来区分。
关于美化
笔者提供的下载包是 Fancybox 官方网站下载的，经过自己美化了一下，做到了自己满意的效果。Fancybox 提供了许多样式可供选择，大家可以去官方网站参考，然后自己根据情况做适当调整，只需要修改 fancybox.js 第148-178行中相关的参数。