用 Lightbox 特效处理图片链接

UPDATE (on 9/8/2012)，不知从什么时候开始，新的 Blogger 似乎已经支持这种 Modal 特效，所以就不需要专门设置了。最后的两个测试图现在其实并没有加任何的文中的代码。

很难说清楚到底应该叫做 Lightbox 特效，还是 Modal 特效，似乎两种叫法都挺常用，于是也就跟着这么乱叫——连中文应该怎么翻译也说不上来。 Lightbox/Modal 特效最大的用处就是在不改变当前页面的情况下，插入一个新的页面层，显示额外内容。以图片为例，点击一个图片的链接后，网页直接在原来页面上放大被点击图片的内容。再次点击关闭按钮或页面空白处，放大的图片自动缩小关闭……特效演示可以看这里，效果很酷，很多论坛上的图片或信息窗口显示都已经用到了这个特效。

关于 Lightbox/Modal 在 Blogger 上的集成应用，网上也有一些相关的讨论。但是很多方法却很麻烦——都要求在每个图片的链接标签 <a href="..."> 中手动添加一个 rel 属性，类似 rel="lightbox" 这样，以后 Lightbox 调用链接标签时，通过链接内是否具有 rel 属性来判断链接是否为一个图片链接。这样大规模的手动修改代码，实在是不可取。

于是，我们的做法便是改手动为自动。使用 JavaScript，对 HTML 代码中的每个链接进行自动分析，并根据链接中的一些特有属性来筛选出 Blogger 图片的链接。然后再写上一段动态脚本，将链接所对应的页面地址转换成图片地址（在点击 Blogger 的图片后，链接转向一张包含图片的网页，而不是图片本身，所以需要再次转换地址）。将图片地址套入特效的代码里，就能实现自动识别图片并加上特效了。

说说大致流程。

第一步，选择一个合适的特效代码，ColorBox 和 jQuery lightBox 都是基于 jQuery 的 Lightbox 特效插件，用法也类似。个人倾向于 ColorBox，似乎功能相对更强些，显示效果上似乎也更好些。

第二步，配置 Lightbox 插件需要调用的 CSS 和 JavaScript。将下载的压缩包中的图片、 CSS 和 JavaScript 都上传到个人服务器上（如果没有的话可以考虑用 App Engine 作为自己的静态文件服务器）。确保 CSS 中的图片地址都已修改为对应的服务器空间地址。

第三步，在博客中调用插件。登录博客后台，选择 Layout 的 Edit HTML，在这一行后，修改并加入以下几行，使得插件所需的 CSS 和 JavaScript 都指向上传的个人服务器：

<link href="path/to/colorbox.css" media="screen" rel="stylesheet" type="text/css"></link>

<link href="path/to/colorbox-custom.css" media="screen" rel="stylesheet" type="text/css"></link>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="path/to/jquery.colorbox.js" type="text/javascript"></script>

第四步，以上已完成了显示 Lightbox 特效所需的配置。接下来自然是解析并调用带有图片地址的链接标签。

分析近两年 Blogger 所使用的图片地址，可归纳两种模式。链接标签自身包含一个 onblur 属性：

<a href="http://www.blogger.com/..." onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}">
<img ...="..." />
</a>

链接标签本身被包含在一个属性 class 为 separator 的父标签中：

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/...">
<img ...="..." />
</a></div>

对于前种，可以通过判断 onblur 属性是否存在来作为识别的关键，因为 onblur 属性在其他的链接中并不常用。而对于后者，则可以通过分析其父节点是否有 class="separator" 属性而加以判断。若判断为 Blogger 图片地址，则让其调用 ColorBox 插件。代码如下。 ColorBox 中的具体参数配置可以看其首页的 Insctructions 部分。

$("a.single").colorbox({transition:"elastic"});
$("a[onblur]").colorbox({transition:"elastic"});

另外，如前面所说，点击 Blogger 的图片后，链接将自动转向一张包含图片的网页（一个包含“s1600-h”字符串的地址），而不是图片本身（图片本身的对应地址没有“-h”部分，只包含“s1600”字符串）。因而需要再增加一行 JavaScript 代码，实现地址转换。这里设置为将鼠标移过链接时自动完成转换。为了能在网页窗口中完整显示一张图片，将图片大小由“s1600”改为“s800”。代码如下：

$("a.single").hover(function() {this.href = this.href.replace("/s1600-h/", "/s800/");});
$("a[onblur]").hover(function() {this.href = this.href.replace("/s1600-h/", "/s800/");});

登录博客后台，选择 Layout，添加一个 HTML/JavaScript Gadget，放入第四步中涉及到的所有代码。

<script type="text/javascript">
  $(function() {
    $.fn.colorbox.settings.bgOpacity = "0.9";
    $("a[onblur]").hover(function() {this.href = this.href.replace("/s1600-h/", "/s800/");});
    $('.separator > a').hover(function() {this.href = this.href.replace('/s1600-h/', '/s800/');});
    $("a[onblur]").colorbox({transition:"elastic"});
    $('.separator > a').colorbox({transition:"elastic"});
  });
</script>

最后放两张可爱的图片来测试一下效果。

特效测试图1

特效测试图2

etc.v1 //Eat, Think, Code.

用 Lightbox 特效处理图片链接

Labels