ZY's WordPress

在网上的图片管理网站经常见到一种图片的显示方式，就是：页面载入时的显示的图片仅是一个缩略图（thumbnail），而它是一个链接，把鼠标移到缩略图上后会变成小手形状，打开后会在当前页面中心弹出一个对话框，并且把当前页面的内容变灰，就像给当前页面蒙上一个半透明的薄膜一样，并且有时候这个弹出对话框有向前和向后翻页的功能，用来显示当前页面上或者和某个主题相关的同一套图片中的每一张图片。

今天由于我要在自己的WordPress上的一篇文章中加一些图片，但因为图片原始尺寸有些大，已经超过了我用的WordPress主题的正文区域宽度，很不美观，所以想找一个上面提到的网页控件来显示图片。我是个Web菜鸟，在网上搜了下，才知道这个效果的控件有个正式的名字，叫：Lightbox，摘录如下：

“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。
类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，此时除了对话框内的表单控件，没有其他区域可以获取焦点。

随后，又找到了些WordPress上的Lightbox插件，在：WordPress官方插件网页，搜索“Lightbox”，就能找到很多这类插件，列举几个如下：

Lightbox 2

Lightbox 2的WordPress官方插件页面
Lightbox 2的插件主页

Lightbox 2的插件主页上有使用说明，方法很简单，有两种使用方式：单张图片方式，图片集方式，见下面的例子：

• 单张图片方式例子：

  <a title="my caption" rel="lightbox" href="img1.jpg">thumbnail1</a>
  

• 图片集方式：

  <a rel="lightbox[roadtrip]" href="img1.jpg">thumbnail1</a>
  <a rel="lightbox[roadtrip]" href="img2.jpg">thumbnail2</a>
  <a rel="lightbox[roadtrip]" href="img3.jpg">thumbnail3</a>
  

  标签中的title属性，在Lightbox 2插件窗口弹出时显示到图片的下面，用作Lightbox 2中图片的标题。

  标签中的rel属性，在WordPress的TinyMCE编辑器中对应于：链接编辑→Advanced→Relationship page to target。

使用感觉：总体不错，不过在使用Firefox时，Lightbox 2的弹出窗口效果有点抖动，而使用基于IE的浏览器时弹出动画效果还可以。Lightbox的选项很丰富，在WordPress管理页中的Settings→Lightbox中设置，包括：

1. Background-color：灰化页面时的背景色。
2. Overlay opacity：灰化页面时的透明度。
3. Resize speed：弹出窗口的动画速度，取值在0~10，注意10是最快的，调到10后Firefox的弹出窗口抖动问题有点减轻了。
4. Sections：选择Lightbox 2作用的章节，例如WordPress的主页（Homepage）、单独的帖子（Individual blog posts）、单独的页面（Individual Pages）等。
5. Auto-lightbox：自动将同一贴子中的所有图片归为一个图片集，以：rel="lightbox[post-ID]" 的形式等等。

Shadowbox JS

Shadowbox JS的WordPress官方插件页面

Shadowbox JS不仅支持图片还支持其它类型媒体：其它页面、YouTube视频、内嵌FLV播放器的FLV视频等，见截图。

ThickBox

ThickBox的WordPress官方插件页面
ThickBox的插件主页

ThickBox好像也是这类网页图片显示控件的正式名称，不知道它和Lightbox有什么区别。

ThickBox的插件主页上有使用说明，例如：

<a class="thickbox" title="Flower" href="/images/flower.jpg">
<img src="/images/thumbs/flower.jpg" alt="Flower" />
</a>

ThickBox采用标签的class属性，来设置使用ThickBox插件对话框打开图片。

感觉：很简洁，速度快，没有Lightbox 2的弹出窗口动画效果，在一篇文章中设置一个图片用ThickBox打开链接后，文中的其它所有图片都可以在这个打开的图片窗口通过向前和向后按钮浏览到，类似于Lightbox 2的图片集方式，但是有时候只是想把属于某一主题的一些图片在同一个弹出窗口浏览，而不是一篇文章中所有的图片都在同一个弹出窗口浏览，所以觉得ThickBox这个功能没有Lightbox 2做的灵活，或者是ThickBox有这个功能但是我没发现。总之相对于Lightbox 2，ThickBox很简单，甚至没有可配置的选项，只能通过改插件源代码实现。