很多朋友都给博客添加了图片缩放效果（幻灯片效果），感觉很酷。
这不仅仅是为了好看，很多上了尺寸的图片如果不是用缩放，会打乱排版，缩放后只是留下图片链接那会带来不方便。
虽然A.shun只是偶尔插点截图，但依然有必要加上这类效果（Lightbox、highslide等）来提高体验。
昨天又对博客进行了一次折腾，把原先的 highslide 效果替换为 Shadowbox 。
选用 Shadowbox 替代 highslide
我原来使用的是 highslide 效果，也很不错。不过偶尔换换口味嘛。而且之前那个 js 还会导致 Opera 左键拖拽不正常，会给分享按钮带来不方便。
Lightbox 和 Shadowbox 有基于 Jquery 的插件，既然我已经加载 Jquery，那不妨一试。
Lightbox 和 Shadowbox 都是灯箱效果，可以平滑展开链接的图片，而同时页面的其余部分都变成透明的黑色背景。对比之后 发现 Lightbox 稍微小巧些，但 Shadowbox 的默认效果比较符合我的审美，对各种浏览器的兼容性也较好，支持图片、视频、网页、flash、FLV等媒体。于是先用着这个 。
暂时先用着默认样式，有空再给图片加上 Css。
点击以下图片查看 Shadowbox 效果，单击图片以外的区域可以返回。
虽然很简单，但我还是折腾了不少时间，惭愧啊。现将方法贴出来和大家分享。
WordPress 插件 Shadowbox JS
如果不喜欢折腾的朋友推荐直接使用这个 Shadowbox 的 WordPress 插件。
这个插件异常强大，除了一般的图片、多媒体播放等效果，选项极多，也很容易看懂。
到 Wp 官方下载 Shadowbox JS 插件：Shadowbox JS For WordPress Plugins。
上传到plugin目录，在线解压，并在 WordPress 控制面板激活该插件。激活后根据需要进行设置。
免插件实现 Shadowbox 效果
到shadowbox-js网站上，根据自己使用的 js 库，并选择用于何种对象、语言，下载相应文件。
先上传并解压到当前主题目录。
加载 Jquery，如果你博客已经使用了 Jquery，请跳过这一步。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
然后在主题中加载 Shadowbox：在你的文章页模板 single.php（或者底部模板 footer.php 加判断语句）中插入以下代码：
<link rel="stylesheet" type="text/css" href="/shadowbox.css"> <script type="text/javascript" src="/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script>
给需要使用该效果的图片设置好大小，链接到原图，并给链接加上 rel="shadowbox" 的属性即可。还有其他多种用法，详见：http://www.shadowbox-js.com/usage.html
A.shun 这里用的是最基本的 rel="shadowbox" 。
但是先前的图片链接没有带上这个属性。没关系，有很多简单的方法来给所有图片链接自动加上属性。
常用的有 jQuery选择器，但是我不会- -！这里用简单的 php 和 wp 函数来实现。
在 主题支持函数 functions.php 中插入以下代码
function shadowbox($content)
{
return preg_replace('/<a(.*?)href=(.*?).(jpg)"(.*?)>/i', '<a$1href=$2.$3" $4 rel="shadowbox">', $content);
}
add_filter('the_content', 'shadowbox', 2);
这是针对jpg图片的，其他格式自己动脑筋。该脚本还支持很多设置，网站上有详细说明。
不罗嗦了，NBA2009～2010赛季总决赛即将开始～
» 转载请以超链接形式注明来源：A.shun's Blog » 《为博客图片添加 Shadowbox 效果》
» 本文链接地址：http://www.a-shun.com/archives/21365.html
这个一定要支持啊 
感觉不错，插件记住了。以后有兴趣用一下。
现在对博客没折腾劲。
很不错哟，我回去试下，现在没用任何有关图片的插件，放了图片后实在不好看
我҉发҉现҉我҉已҉经҉失҉去҉了҉折҉腾҉的҉心҉了҉。。。。
@砼砼 捅捅也喜欢菊花体啊
酷毙了的效果。
这个效果也很不错。收藏一下。
一直使用highslide的
@奔四大叔 highslide很不错，我只是换换口味
可惜 不支持ie 6
@随影 那个，IE6显然是支持的。
虽然也不是我想支持。
JQuery有很多支持图片展示插件的
我看你blog优化做的还挺多的，html也压缩过
难道也是点点更健康--------------->
@Qing 恩，对头
好复杂
呵呵，我的图片都是处理好再上传的。
我现在用的是超小型基于Jquery的~3kb~
@Bee君 whitebox啊，体积真小呢
太能折腾了，我还是用现成的吧
@derek 年轻人，不折腾不行哟
shun是NBA迷呵呵
@小小 恩
会拖网速的,不安装这插件了..
@瓜瓜 看来你不仔细看的啊
@瓜瓜 为什么要用这个头像，明明是我先用的嘛。
每次来都这么晚，每次来都看不懂。
你何时教教我啊？
@Stefana 你何时来都不晚呢
什么时候在IM上被你逮着，就教你
虽然很常见了，但效果还是不错的。
謝謝。這個我當然不想折騰。
Shadowbox JS这个插件也已经启用，点击放大后效果很炫。不过为什么放大后的图片感觉比原因还小呢？
怎么设置才能让点击放大后的图片显示成大图呢？
O(∩_∩)O哈哈~我用上了
效果还不错~~~
哈哈。我的已经用上了。谢谢
我还在用灯箱 2 是不是落伍了？
又一个可以选用的图片效果……
我是来说这张shiki很美的www
@静夜燃香 同，我也觉得这样的shiki很美
function shadowbox($content){
return preg_replace('/<a(.*?)href=(.*?).(jpg)"(.*?)>/i', '<a$1href=$2.$3" $4 rel="shadowbox">', $content);
}
add_filter('the_content', 'shadowbox', 2);
再发一次、、
@Kars 学习了
@A.shun
泪奔，居然 发错了、OMG
function shadowbox($content){
return preg_replace('/<a(.*?)href=(.*?).(bmp|gif|jpeg|jpg|png)"(.*?)>/i', '<a$1href=$2.$3" $4 rel="shadowbox">', $content);
}
add_filter('the_content', 'shadowbox', 2);
@Kars 额，好在我刚刚在折腾别的先～
请问对于外链图片有效吗？
@乔治 有效的
我把圖片那個插件卸载了，准备换另外的．．
@BoKeam 偶尔换换更健康，不会腻