Go to comments ↓ 2010年06月04日 - Home » Blog

为博客图片添加 Shadowbox 效果

很多朋友都给博客添加了图片缩放效果（幻灯片效果），感觉很酷。

这不仅仅是为了好看，很多上了尺寸的图片如果不是用缩放，会打乱排版，缩放后只是留下图片链接那会带来不方便。

虽然 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

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 Blog » 《为博客图片添加 Shadowbox 效果》
» 本文链接地址：http://shun.im/21365