scribble

守望的麦子

About Projects Tool Guestbook

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

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

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

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

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

  1. shadowbox-js 网站上,根据自己的应用对象和语言选择相应的文件。

  2. 在相应的主题页模板中插入以下代码:

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
  1. 使用时将相应图片设置好大小,链接到原图,并给链接加上 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

About Projects Tool Guestbook