用 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 Eng