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