如何使用Lightbox 2(5)

查看 Lightbox 图片库

重新加载更改后的图片库。图 6 展示了选中的图片。

图 6. 含有 20 张图片的组中的第 1 张图片

乍看一眼，好像没有什么区别。但这里有一些细微的差别。首先，现在的图片库中的图片标有编号，当前显示的图片是 “20 张图片中的第 1 张”。 现在，将鼠标停在当前的图片上就会显示 “NEXT” 按钮。如果这不是该图片组的第 1 张图片，还会显示一个 “PREV” 按钮。使用这些按钮可以导航到下一张或上一张图片。图 7 显示了 “NEXT” 按钮。

图 7. 可以在一个组中前进或后退

在一个页面上创建多个图片库

您可以在同一个页面上创建许多不同的图片库，这只需在方括号中使用不同的组名，方括号必须是值为 “lightbox” 的 rel 属性。这样，您就可以拥有一个与水相关的图片集，一个与人脸有关的图片集，等等。

但是要避免乱用或滥用图片库。作为摄影师或设计师，您很清楚为什么这张图片放在这个图片库，而不是另一张。您还可能专门设计页面来突出这些差别。但对于一般的 Web 用户，这些差别可能看不出来，或者至少不明显。对于这种情况，多个图片库会造成混乱。为什么不显示所有的图片？为什么在这张图片上可以点击 NEXT，而在另一张上不行？ 如果不是很清楚，最好使用一个图片库，将页面上的所有图片都包含在其中，这样比较直观明了，不会把用户弄糊涂。

回页首

添加图片描述（这很重要！）

Lightbox 的另一个很好的特性是可以显示一些与图片相关的信息。就像可以给图片库添加小标题一样，也可以为图片添加标题。 为 “a” 元素添加标题属性

您已经使用 a 属性包围了每一个图片。同样，为 Lightbox 添加额外信息也依赖于 a 元素。您曾经使用它在 Lightbox 中显示图片，并使用它进行相片分组。现在，您可以使用该 a 元素为图片添加标题。

添加一个 title 属性，然后提供一个图片标题作为该属性的值。清单 8 通过几个图片展示了这个特性。

清单 8. 为图片添加标题（使用 a 元素）

<-- etc... -->

查看图片的标题 现在重新加载页面。单击一张图片，就会在图片的组信息上面看到粗体的图片标题。图 8 展示了示例图片库第 4 张图片的标题。

图 8. 在 lightbox 中显示标题

Lightbox 标题是附加的图片信息

注意，为 Lightbox 添加的标题必须是惟一的。事实上，并不是为图片本身添加标题；而是要修改 img 元素。这会导致一个常见的错误：图像的 alt 属性与图像 Lightbox 中显示的内容毫不相关。这是好是坏还存在争议，但这是实际 存在的。

这里的目标是尽量使 Lightbox 简洁明了。因此，如果要为图片添加 alt 属性，或一个很长的描述（使用 longdesc），添加 Lightbox 标题时不需要更改这些属性。事实上，我们鼓励您为图片添加 alt 属性，毕竟 XHTML 要求页面上的所有图片都有这个属性。

回页首

更改基本的 Lightbox UI 属性

到目前为止，所提到的内容都是 “标准的” Lightbox 特性。但它还有更多 其他特性，尤其是在利用 Lightbox CSS 和图像方面。 更改 Lightbox CSS

记住，Lightbox 的所有显示属性都包含在 CSS 文件 lightbox.css 中。由于 CSS 只是普通文本，所以您可以打开该文件并进行任意的更改。事实上，如清单 9 所示，CSS 并不是很复杂。

清单 9. Lightbox 的 CSS