30 Jul 2010
「推荐」Shadowbox 图片效果

博客安装了 highslide 插件，但是使用 highslide 实现灯箱效果，生成的代码比较繁琐。同样类似效果的 jquery 小插件很多，通过比对最终选择了 Shadowbox, 安装后无需过多设置，默认即可实现很好的灯箱效果，可以平滑展开链接的图片，而同时页面的其余部分都变成透明的黑色背景；对各种浏览器的兼容性也较好，而且支持图片、视频、网页、flash、FLV等媒体。

具体效果可以通过 /2010/07/bhu.html 查看。

实现方法可以通过安装 Shadowbox JS For WordPress Plugins 插件，后台激活设置。（未经测试）

这里说一下免插件将这一功能集成到你的主题中：

到 shadowbox-js 网站上，根据自己的应用对象和语言选择相应的文件。
在相应的主题页模板中插入以下代码：

<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

对于以前的图片没有使用 rel=”shadowbox” 属性的，我们可以通过在主题支持函数 functions.php 中插入以下代码实现（用于jpg图片，其他应用对象格式请根据自己需要设置）：

function shadowbox($content)
{
	return preg_replace('/<a(.*?)href=(.*?).(jpg)"(.*?)>/i', '<a$1href=$2.$3" $4 rel="shadowbox">', $content);
}
add_filter('the_content', 'shadowbox', 2);

点击查看效果：

Til next time,
Jason at 00:00

scribble

30 Jul 2010「推荐」Shadowbox 图片效果

30 Jul 2010
「推荐」Shadowbox 图片效果