使用 Lightbox 2 和 JavaScript 构建出色的图片库

Brett D. McLaughlin, Sr., 作家和编辑, O'Reilly Media, Inc.

2008 年 11 月 28 日

Web 逐渐成为一种展示艺术的媒介。Web 页面是展示各种图片的主要工具，包括业余摄影爱好者拍的普通相片和专业艺术馆制作的精美图片等。但是一个漂亮的图片会受到框架的影响，框架可能使它更好，也可能使它更差。通过使用一个简单的 JavaScript 库，您可以美美地 “装饰” 在线图片，并为其提供一个直观的用户界面。

JavaScript 无疑是最普遍的 Web 编程语言，它像 HTML、XHTML 和 CSS 一样被广泛使用。有用的 JavaScript 库数不胜数，比较好的库能够适应任何最新的浏览器，并且很好地协调了不同的浏览器和用户偏好。最有用最流行的 JavaScript 库之一是 Lightbox 2，它提供在线图片库、图像覆盖和图片集导航功能。在本文，您将详细学习 Lightbox 2，包括如何定制一些不常见的，甚至有可能很精妙的 Lightbox 功能。学习完本文之后，您就可以通过一个很容易使用的界面巧妙地展示您的图片集了。

人人都是摄影家

五年以前，似乎大家都喜欢使用博客。许多人都喜欢在线分享他们最近的生活，包括母亲、祖母、叔叔、士兵和运动员等等。最近，在线展示图片已经成为潮流。

只需要几百美元就可以购买一个很好的数码相机（一个高中生就能做到），然后开始积累摄影技巧。但很多图片都是以分享为目的的，而不是独自欣赏。这便让 Web 发挥了作用：Web 提供的平台比任何艺术馆都大（但品位可能低些）。如果一个漂亮的图片被 HTML 页面的文本所包围，它就失去了魅力。入门摄影者的才能可能会因糟糕的 Web 设计而逊色。

开始使用 Lightbox（现在是新版本 Lightbox 2）。Lightbox 是一个提供全功能图片查看器的 JavaScript 库。图片显示在一个巧妙的 “覆盖层” 上，后者位于主 Web 页面的顶层。还可以设置导航、图片描述，甚至自定义按钮。图 1 是一个最简单的 Lightbox。

图 1. 默认的 Lightbox 查看器

但是，这只是一个很简单的设置，Lightbox 可以发挥的余地还非常大。

在探讨 Lightbox 的细节之前，先了解使用它的几个主要原因，这是您应该知道的。尽管您自己非常信任 Lightbox，但您必须征得同事、老板或朋友的同意，一起在网站上使用 Lightbox。另外，了解为什么 选择某种技术或工具往往和该工具本身一样重要。

Lightbox 属于 JavaScript

首先，Lightbox 属于 JavaScript。所有现代的浏览器（和几个旧浏览器）都直接支持 JavaScript，这确保您的页面在大部分浏览器上都很好用。尽管确实存在其他很好的基于插件的技术（比如 Flash 或 Microsoft® 控件套装），JavaScript 都是所有浏览器的一部分。因此，您的用户不需要下载特别的组件，或担心浏览器的更新。几乎每个使用浏览器的计算机用户都能按原样查看到您设计的 Lightbox。

Lightbox 与浏览器无关

Lightbox 不仅是用 JavaScript 构建的，而且用的还是跨浏览器 JavaScript。就是说 Lightbox 可用于任何现代浏览器，并且在各种浏览器上显示的效果是一样的。Internet Explorer、Safari、Firefox 和 Opera — 都以相同的方式处理 Lightbox 代码。这意味着使用 Lightbox 时，您构建的代码和页面不要求用户选择特定的浏览器（或操作系统）。反过来也就意味着更多的用户、更多的人能够看到您的图片（您的岳母不会总打电话索要您的孩子的近照了，因为在网上就能看到）。这不错，不是吗？

Lightbox 基于现成的库

最后，Lightbox 实际上建立在两个构建良好的 JavaScript 库的基础之上，即 Prototype 和 Scriptaculous。Prototype 提供一些处理页面及其对象的实用函数，而 Scriptaculous 则添加大量的显示效果。它们已经存在好几年，并且是经过严谨测试的标准 JavaScript，可以在各种现代浏览器上使用。因此，Lightbox 是构建在坚实的代码之上的，而不是从头构建的（从而引入了 bug）。

回页首

下载和 “安装” Lightbox

与其他 JavaScript 库一样，设置 Lightbox 非常简单。以下是详细步骤。

下载 Lightbox

在本文的参考资料小节单击 “Lightbox 2 Web 站点” 链接，访问 Lightbox Web 站点（实际上，是 Lightbox 2 站点）。在导航的左侧，单击 “Download” 链接。此时，您的浏览器应该类似于图 2。

图 2. Lightbox 下载小节

单击大号字体的 Lightbox 链接将获得一个 ZIP 文件，名称类似于 lightbox2.04.zip（根据各个版本略有不同）。您可以将其解压缩到一个称为 lightbox2/ 的文件夹。图 3 展示了下载文件夹包含的内容：非常简单。

图 3. Lightbox 下载内容

使您的站点可以访问 Lightbox 文件

将脚本放到哪个目录？

传统的方法建议将所有脚本都放到您的站点上一个称为 scripts/ 的目录。因此脚本的路径可能是 scripts/prototype.js。但是最近脚本目录的命名越来越有针对性。例如 JavaScript 存放在 js/ 目录中，而 ASP.NET 脚本存放在 asp/目录中。Lightbox 使用的就是这种命名模式。如果您已经在以前的站点中使用 scripts/ 作为目录，可能需要作一些调整。

现在您需要使您的 Web 站点可以访问所有 Lightbox 文件 — 包括它使用的图片和 CSS。幸运的是，Lightbox 下载已经对此有所准备。它使用标准的目录名称，比如 images/、css/ 和 js/。因此，您可以将这三个目录及其内容复制到您的站点的根目录，为下一步做好准备。

注意：默认的 Lightbox 下载包含一个 index.html 文件。您不能将它复制到 Web 根目录，因为这很可能会覆盖您的站点的索引页面。该页面是一组安装说明，但在本文中，可以删除 index.html 避免混淆。

引用刚才那三个与 Lightbox 相关的文件

将文件放置到正确的位置之后，就可以引用这些文件了。下面是 3 行 JavaScript 代码，您必须将其添加到需要使用 Lightbox 的页面：

<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script>

您还需要添加一条到 Lightbox CSS 样式表的链接：

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

在深入了解这些脚本和样式表的功能之前，您需要一个示例页面。

回页首

构建一个简单的示例应用程序

开始之前，我们需要一个带有一些图片的页面。清单 1 展示了一个图片库页面的 HTML。接下来，将该 HTML 输入到您的编辑器，这可以通过复制粘贴来实现，也可以从示例中下载这些代码（从参考资料小节获得）。

清单 1. 示例图片库的 HTML

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Image Gallery</title><link rel="stylesheet" href='css/gallery.css' type="text/css"media="screen, projection" /></head><body><h1>Image Gallery</h1><div id="page"><div id="images"><ul class="gallery"><li><img src="img/photo01.jpg" alt="description" /></li><li><img src="img/photo02.jpg" alt="description" /></li><li><img src="img/photo03.jpg" alt="description" /></li><li><img src="img/photo04.jpg" alt="description" /></li><li><img src="img/photo05.jpg" alt="description" /></li><li><img src="img/photo06.jpg" alt="description" /></li><li><img src="img/photo07.jpg" alt="description" /></li><li><img src="img/photo08.jpg" alt="description" /></li><li><img src="img/photo09.jpg" alt="description" /></li><li><img src="img/photo10.jpg" alt="description" /></li><li><img src="img/photo11.jpg" alt="description" /></li><li><img src="img/photo12.jpg" alt="description" /></li><li><img src="img/photo13.jpg" alt="description" /></li><li><img src="img/photo14.jpg" alt="description" /></li><li><img src="img/photo15.jpg" alt="description" /></li><li><img src="img/photo16.jpg" alt="description" /></li><li><img src="img/photo17.jpg" alt="description" /></li><li><img src="img/photo18.jpg" alt="description" /></li><li><img src="img/photo19.jpg" alt="description" /></li><li><img src="img/photo20.jpg" alt="description" /></li></ul></div></div></body></html>

清单 2 是该示例页面的 CSS。

清单 2. 示例图片库的 CSS

        *{border: 0;margin: 0;padding: 0;}body{background: #fff;color: #777;padding: 50px;}#page {position: relative;}#images {float: left;width: 600px;}#details {color: #000;}h1{background: inherit;border-bottom: 1px dashed #ccc;color: #933;font: 32px Georgia, serif;font-weight: bold;margin: 0 0 20px;padding: 0 0 15px;text-align: center;}.gallery{width: 700px;cursor: default;list-style: none;}.gallery img{background: #fff;border-color: #aaa #ccc #ddd #bbb;border-style: solid;border-width: 1px;color: inherit;padding: 2px;vertical-align: top;width: 100px;height: 75px;}.gallery li{background: #eee;border-color: #ddd #bbb #aaa #ccc;border-style: solid;border-width: 1px;color: inherit;display: inline;float: left;margin: 3px;padding: 5px;position: relative;}

确保 HTML 和 CSS 准备到位，并且已经从参考资料小节下载了需要引用的图片。然后，上传刚才创建的 HTML。您应该会看到如图 4 所示的页面。

图 4. 用 Lightbox 生成的图片库

这是完美的 Lightbox 页面：展示了很多图片，并且图片的分辨率很高。如果相片的尺寸大一些的话效果会更好，但在主 HTML 内显示全尺寸的图片会浪费大量空间。

回页首

将 Lightbox 添加到图片库页面

有了实际的页面之后，就可以将刚才提到的脚本引用放置到适当的位置。然后，只需要几个简单的步骤，您就可以在您创建的站点上看到 Lightbox 的效果。

引用正确的脚本

首先，打开 index.html（或您给示例图片库起的其他名字）。在 head 部分，添加清单 3 中的代码行。

清单 3. 引用 Lightbox 脚本（在上下文中）

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Image Gallery</title><link rel="stylesheet" href='css/gallery.css' type="text/css"media="screen, projection" /> <script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script> </head><-- Rest of HTML ... -->

这些 script 引用必须按照这种特定的顺序排列。后一个脚本将引用前一个脚本中的函数，因此顺序很重要。如果混乱了顺序，页面将出现错误，所以要格外注意：先引用 Prototype，然后是 Scriptaculous，最后才是 Lightbox。

引用正确的 CSS

接下来，添加一个 CSS 引用，如清单 4 所示。

清单 4. 引用 Lightbox CSS（在上下文中）

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Image Gallery</title><link rel="stylesheet" href='css/gallery.css' type="text/css"media="screen, projection" /><script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /></head><-- Rest of HTML ... -->

很容易漏掉这个步骤，因为 Lightbox 本质上是一组脚本。但这些脚本显示图片，并且图片的显示由 Lightbox CSS 控制。因此这是一个很重要的步骤（虽然容易忘记）。

此外，您还可以经常更新 Lightbox CSS，使其匹配您的显示偏好。我们会在以后讨论这个内容，但是下面这点也很重要：使用 Lightbox 等工具箱将内容（XHTML）从表示（CSS）分离出来，将表示从行为（JavaScript）分离出来能提供很大的灵活性。

Model View Controller
这种分离内容、表示和行为的方式在架构上称为 Model/View/Controller。这种严谨的方法是一种最好的实践，可用于 Web 页面和企业应用程序。MVC 架构的价值在于可以维护和调整每一个元素，同时又不影响其他元素。数据独立于格式，而功能独立于数据。本文随后讨论的简单定制就是 MVC 设计的直接结果。

将 Lightbox 文件复制到示例目录

这是容易疏忽的另一个步骤：确保 Lightbox 脚本和 CSS 与示例图片库所在的目录一样。如果您已经下载了图片库并将其放在已有站点上，只需上传 Lightbox 文件。如果是本地处理，只需确保复制了 Lightbox scripts/、css/ 和 images/ 目录，以及您的图片库文件。

为图片库的每个图片添加链接

Lightbox 通过 a 元素来工作。所以，在继续之前，您必须用 a 标记打包页面上每个需要在 Lightbox 中显示的图片。通常，链接的目标 — href 属性的值 — 应该是图片本身，并且常以全尺寸显示。

清单 5 展示使用 a 标记更新后的图片库的 HTML。

清单 5. 为每个图片添加链接

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Image Gallery</title><link rel="stylesheet" href='css/gallery.css' type="text/css"media="screen, projection" /><script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /></head><body><h1>Image Gallery</h1><div id="page"><div id="images"><ul class="gallery"><a href="img/photo01.jpg"><li><img src="img/photo01.jpg" alt="description" /></li></a><a href="img/photo02.jpg"><li><img src="img/photo02.jpg" alt="description" /></li></a><a href="img/photo03.jpg"><li><img src="img/photo03.jpg" alt="description" /></li></a><a href="img/photo04.jpg"><li><img src="img/photo04.jpg" alt="description" /></li></a><a href="img/photo05.jpg"><li><img src="img/photo05.jpg" alt="description" /></li></a><a href="img/photo06.jpg"><li><img src="img/photo06.jpg" alt="description" /></li></a><a href="img/photo07.jpg"><li><img src="img/photo07.jpg" alt="description" /></li></a><a href="img/photo08.jpg"><li><img src="img/photo08.jpg" alt="description" /></li></a><a href="img/photo09.jpg"><li><img src="img/photo09.jpg" alt="description" /></li></a><a href="img/photo10.jpg"><li><img src="img/photo10.jpg" alt="description" /></li></a><a href="img/photo11.jpg"><li><img src="img/photo11.jpg" alt="description" /></li></a><a href="img/photo12.jpg"><li><img src="img/photo12.jpg" alt="description" /></li></a><a href="img/photo13.jpg"><li><img src="img/photo13.jpg" alt="description" /></li></a><a href="img/photo14.jpg"><li><img src="img/photo14.jpg" alt="description" /></li></a><a href="img/photo15.jpg"><li><img src="img/photo15.jpg" alt="description" /></li></a><a href="img/photo16.jpg"><li><img src="img/photo16.jpg" alt="description" /></li></a><a href="img/photo17.jpg"><li><img src="img/photo17.jpg" alt="description" /></li></a><a href="img/photo18.jpg"><li><img src="img/photo18.jpg" alt="description" /></li></a><a href="img/photo19.jpg"><li><img src="img/photo19.jpg" alt="description" /></li></a><a href="img/photo20.jpg"><li><img src="img/photo20.jpg" alt="description" /></li></a></ul></div></div></body></html>

将 Lightbox 连接到每个图片

最后一个步骤很简单：每个 a 元素都需要一个值为 “lightbox” 的新属性 rel。仅需将该属性添加到围绕想要在 Lightbox 中显示的图片的每个链接。清单 6 展示了这一更改。

清单 6. 围绕每一个图片添加链接

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Image Gallery</title><link rel="stylesheet" href='css/gallery.css' type="text/css"media="screen, projection" /><script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /></head><body><h1>Image Gallery</h1><div id="page"><div id="images"><ul class="gallery"><a href="img/photo01.jpg" rel="lightbox"><li><img src="img/photo01.jpg" alt="description" /></li></a><a href="img/photo02.jpg" rel="lightbox"><li><img src="img/photo02.jpg" alt="description" /></li></a><a href="img/photo03.jpg" rel="lightbox"><li><img src="img/photo03.jpg" alt="description" /></li></a><a href="img/photo04.jpg" rel="lightbox"><li><img src="img/photo04.jpg" alt="description" /></li></a><a href="img/photo05.jpg" rel="lightbox"><li><img src="img/photo05.jpg" alt="description" /></li></a><a href="img/photo06.jpg" rel="lightbox"><li><img src="img/photo06.jpg" alt="description" /></li></a><a href="img/photo07.jpg" rel="lightbox"><li><img src="img/photo07.jpg" alt="description" /></li></a><a href="img/photo08.jpg" rel="lightbox"><li><img src="img/photo08.jpg" alt="description" /></li></a><a href="img/photo09.jpg" rel="lightbox"><li><img src="img/photo09.jpg" alt="description" /></li></a><a href="img/photo10.jpg" rel="lightbox"><li><img src="img/photo10.jpg" alt="description" /></li></a><a href="img/photo11.jpg" rel="lightbox"><li><img src="img/photo11.jpg" alt="description" /></li></a><a href="img/photo12.jpg" rel="lightbox"><li><img src="img/photo12.jpg" alt="description" /></li></a><a href="img/photo13.jpg" rel="lightbox"><li><img src="img/photo13.jpg" alt="description" /></li></a><a href="img/photo14.jpg" rel="lightbox"><li><img src="img/photo14.jpg" alt="description" /></li></a><a href="img/photo15.jpg" rel="lightbox"><li><img src="img/photo15.jpg" alt="description" /></li></a><a href="img/photo16.jpg" rel="lightbox"><li><img src="img/photo16.jpg" alt="description" /></li></a><a href="img/photo17.jpg" rel="lightbox"><li><img src="img/photo17.jpg" alt="description" /></li></a><a href="img/photo18.jpg" rel="lightbox"><li><img src="img/photo18.jpg" alt="description" /></li></a><a href="img/photo19.jpg" rel="lightbox"><li><img src="img/photo19.jpg" alt="description" /></li></a><a href="img/photo20.jpg" rel="lightbox"><li><img src="img/photo20.jpg" alt="description" /></li></a></ul></div></div></body></html>

检查 Lightbox 的实际效果

接下来仅需将更改保存到 HTML 并加载（或重新加载）图片库。单击图片，它就会以动画的形式在 Lightbox 中打开，并且是全尺寸的。查看图 5，看看在 Firefox 浏览器中的显示效果如何。

图 5. 使用 Lightbox 的图片库

每个图片都出现在一个优美的、高对比度的框中。其余的图片变暗，突出了选中的图片。当然，这里还有一个方便的 “Close” 按钮，单击该按钮就能回到主图片库。

回页首

图片分组

尽管初始的（默认的）Lightbox 已经相当不错，但 Lightbox 还有很多其他功能。最常用的功能是图片分组。下面以示例图片库为例进行讲解。要查看下一个图片，必须先关闭当前图片再单击下一个图片。但这有点不像 “图片库”。在真正的图片库中，您可以直接浏览下一个图片。还好，Lightbox 提供了类似的功能。

为图片分组

对于要分组的图片，只需在 rel="lightbox" 后添加一个组名。将组名添加到方括号中（[ 和 ]），这会把所有内容包含到引号中。现在，让我们将示例中的所有图片放到名为 “gallery” 的组中。清单 7 给出了需要更改的地方。

清单 7. 将页面上的所有图片分组

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Image Gallery</title><link rel="stylesheet" href='css/gallery.css' type="text/css"media="screen, projection" /><script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /></head><body><h1>Image Gallery</h1><div id="page"><div id="images"><ul class="gallery"><a href="img/photo01.jpg" rel="lightbox[gallery]"><li><img src="img/photo01.jpg" alt="description" /></li></a><a href="img/photo02.jpg" rel="lightbox[gallery]"><li><img src="img/photo02.jpg" alt="description" /></li></a><a href="img/photo03.jpg" rel="lightbox[gallery]"><li><img src="img/photo03.jpg" alt="description" /></li></a><a href="img/photo04.jpg" rel="lightbox[gallery]"><li><img src="img/photo04.jpg" alt="description" /></li></a><a href="img/photo05.jpg" rel="lightbox[gallery]"><li><img src="img/photo05.jpg" alt="description" /></li></a><a href="img/photo06.jpg" rel="lightbox[gallery]"><li><img src="img/photo06.jpg" alt="description" /></li></a><a href="img/photo07.jpg" rel="lightbox[gallery]"><li><img src="img/photo07.jpg" alt="description" /></li></a><a href="img/photo08.jpg" rel="lightbox[gallery]"><li><img src="img/photo08.jpg" alt="description" /></li></a><a href="img/photo09.jpg" rel="lightbox[gallery]"><li><img src="img/photo09.jpg" alt="description" /></li></a><a href="img/photo10.jpg" rel="lightbox[gallery]"><li><img src="img/photo10.jpg" alt="description" /></li></a><a href="img/photo11.jpg" rel="lightbox[gallery]"><li><img src="img/photo11.jpg" alt="description" /></li></a><a href="img/photo12.jpg" rel="lightbox[gallery]"><li><img src="img/photo12.jpg" alt="description" /></li></a><a href="img/photo13.jpg" rel="lightbox[gallery]"><li><img src="img/photo13.jpg" alt="description" /></li></a><a href="img/photo14.jpg" rel="lightbox[gallery]"><li><img src="img/photo14.jpg" alt="description" /></li></a><a href="img/photo15.jpg" rel="lightbox[gallery]"><li><img src="img/photo15.jpg" alt="description" /></li></a><a href="img/photo16.jpg" rel="lightbox[gallery]"><li><img src="img/photo16.jpg" alt="description" /></li></a><a href="img/photo17.jpg" rel="lightbox[gallery]"><li><img src="img/photo17.jpg" alt="description" /></li></a><a href="img/photo18.jpg" rel="lightbox[gallery]"><li><img src="img/photo18.jpg" alt="description" /></li></a><a href="img/photo19.jpg" rel="lightbox[gallery]"><li><img src="img/photo19.jpg" alt="description" /></li></a><a href="img/photo20.jpg" rel="lightbox[gallery]"><li><img src="img/photo20.jpg" alt="description" /></li></a></ul></div></div></body></html>

查看 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 元素）

        <div id="page"><div id="images"><ul class="gallery"><a href="img/photo01.jpg" rel="lightbox[gallery]" title="Sunrise over the bay"><li><img src="img/photo01.jpg" alt="description" /></li></a><a href="img/photo02.jpg" rel="lightbox[gallery]" title="Birds scattering at dusk"><li><img src="img/photo02.jpg" alt="description" /></li></a><a href="img/photo03.jpg" rel="lightbox[gallery]"title="Rock balanced precariously on rock"><li><img src="img/photo03.jpg" alt="description" /></li></a><a href="img/photo04.jpg" rel="lightbox[gallery]"title="I saw men as trees walking..."><li><img src="img/photo04.jpg" alt="description" /></li></a><-- etc... --></ul></div></div>

查看图片的标题

现在重新加载页面。单击一张图片，就会在图片的组信息上面看到粗体的图片标题。图 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

        #lightbox{  position: absolute; left: 0; width: 100%; z-index: 100;text-align: center; line-height: 0;}#lightbox img{ width: auto; height: auto;}#lightbox a img{ border: none; }#outerImageContainer{ position: relative; background-color: #fff;width: 250px; height: 250px; margin: 0 auto; }#imageContainer{ padding: 10px; }#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%;text-align: center; line-height: 0; }#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }#imageContainer>#hoverNav{ left: 0;}#hoverNav a{ outline: none;}#prevLink, #nextLink{ width: 49%; height: 100%;background-image: url(data:image/gif;base64,AAAA);/* Trick IE into showing hover */ display: block; }#prevLink { left: 0; float: left;}#nextLink { right: 0; float: right;}#prevLink:hover, #prevLink:visited:hover {background: url(../images/prevlabel.gif) left 15% no-repeat; }#nextLink:hover, #nextLink:visited:hover {background: url(../images/nextlabel.gif) right 15% no-repeat; }#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff;margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }#imageData{    padding:0 10px; color: #666; }#imageData #imageDetails{ width: 70%; float: left; text-align: left; }#imageData #caption{ font-weight: bold; }#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }#imageData #bottomNavClose{ width: 66px; float: right;padding-bottom: 0.7em; outline: none;}#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%;height: 500px; background-color: #000; }

由这些 CSS 属性之一表示的任何东西都是完全可以控制的。比如您需要：

每个图片的背景是黑色的
每个图片的详细信息的背景是黑色的，但文本是白色的
图像描述的字体大小是 Times New Roman 12 号字体
页面其余部分变成渐退的灰色，而当前内容变成更深的颜色

这些更改都是有可能的。清单 10 展示了更新后的 lightbox.css，它处理了所有这些内容。

清单 10. 更新后的 Lightbox CSS

        #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100;text-align: center; line-height: 0;}#lightbox img{ width: auto; height: auto;}#lightbox a img{ border: none; }#outerImageContainer{ position: relative; background-color: #000;width: 250px; height: 250px; margin: 0 auto; }#imageContainer{ padding: 10px; }#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%;text-align: center; line-height: 0; }#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }#imageContainer>#hoverNav{ left: 0;}#hoverNav a{ outline: none;}#prevLink, #nextLink{ width: 49%; height: 100%;background-image: url(data:image/gif;base64,AAAA);/* Trick IE into showing hover */ display: block; }#prevLink { left: 0; float: left;}#nextLink { right: 0; float: right;}#prevLink:hover, #prevLink:visited:hover {background: url(../images/prevlabel.gif) left 15% no-repeat; }#nextLink:hover, #nextLink:visited:hover {background: url(../images/nextlabel.gif) right 15% no-repeat; }#imageDataContainer{ font: 12px Times New Roman; background-color: #000;margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }#imageData{   padding:0 10px; color: #fff; }#imageData #imageDetails{ width: 70%; float: left; text-align: left; }#imageData #caption{ font-weight: bold; }#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }#imageData #bottomNavClose{ width: 66px; float: right;padding-bottom: 0.7em; outline: none;}#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%;height: 500px; background-color: #666; }

在您自己的 lightbox.css 上进行这些更改（注意保存原始版本）。然后重新加载页面，单击一个图片，就会看到类似于图 9 的效果。

图 9. 修改后的颜色更暗的 Lightbox

更改 Lightbox 图像

更改后的 Lightbox 有一个很明显的问题：CLOSE 按钮是黑色的，而其背景是白色的，这看起来很怪。NEXT 和 PREV 按钮也是这样。这与文本使用白色、背景使用黑色的颜色主题冲突。幸好，可以通过更改 Lightbox 来解决这个问题。您可以使用工具（比如 Photoshop、Photoshop Elements 或开源的 G.I.M.P.）来根据需要更改按钮的颜色。

图 10 展示了一个经过修改的非常简单的 CLOSE 按钮；图 11 是 PREV 按钮，图 12 是 NEXT 按钮。

图 10. 更新后的 CLOSE 按钮

图 11. 更新后的 PREV 按钮

图 12. 更新后的 NEXT 按钮

您可以从以下的 Download 表中的完整示例包中下载这些图像。CLOSE 按钮对应 closelabel.gif，PREV 按钮对应 prevlabel.gif，NEXT 对应 nextlabel.gif。一定要保留这些名字，因为已经设置 Lightbox JavaScript 和 CSS 查找它们。

这里展示的按钮很简单，但您可以让它变得丰富多彩（实际上，您要避免按钮闪动。因为这与恐怖的 <BLINK /> 标记非常相似）。此外，您获得新的图像之后，就将其放到 Lightbox 图像目录中，覆盖现有的按钮图像。

现在重新加载图片库并单击其中的一张图片。您应该会看到如图 13 所示的效果。

图 13. 修改后的带有自定义按钮的 Lightbox

当然，您还可以更改其他内容，比如：图片、演示、大小、边框和 Lightbox 的位置等。此外，因为 CSS 可以提供一个干净的独立的表示层，所有这些更改不需要编译和定制代码。

回页首

结束语

就像其他 Web 小部件或完成简单任务的 JavaScript 库一样，编写 Lightbox 很简单。不过，Web 设计的重心是由用户决定的。对用户而言，Lightbox 是一种查看图片的新颖、简单的方法。加载图片时出现的简单动画很好看，同时还出现一个 “进度” 提示符。图片导航也直观宜人。这综合起来就提供了一种很好的用户体验。根据我们的经验，用户往往都花很长时间在网上查看图片。

如果您是开发人员或设计人员，那就更好了，因为 Lightbox 支持跨浏览器使用。您不必要求用户下载 Flash 插件，也不必记住 Internet Explorer 是否支持这些插件。但您得到的结果是：更好的 Web 页面，更好的图片显示和更佳的用户体验。

最后，Lightbox 的定制功能是很强大的。您可以更改颜色主题、图片的框架和图片的位置。您可以使用自己定义的按钮，或使用其他默认的按钮。此外，您还可以更改显示 Lightbox 时变淡的背景的颜色。加上图片分组和添加标题这两项功能，Lightbox 就是一个非常健壮的工具，您可以将它添加到您的工具箱中。

使用 Lightbox 2 和 JavaScript 构建出色的图片库相关推荐

如何仅使用HTML和JavaScript构建简单的URL缩短器
by Palash Bauri 由Palash Bauri 如何仅使用HTML和JavaScript构建简单的URL缩短器 (How to build a simple URL shortener w ...
css菜单缓慢滑动_如何使用HTML，CSS和JavaScript构建滑动菜单栏
css菜单缓慢滑动 by Supriya Shashivasan 由Supriya Shashivasan 如何使用HTML,CSS和JavaScript构建滑动菜单栏 (How to build a ...
react 组件构建_让我们用100行JavaScript构建一个React Chat Room组件
react 组件构建 by Kevin Hsu 通过徐凯文让我们用100行JavaScript构建一个React Chat Room组件 (Let's Build a React Chat Room ...
electron 桌面程序_如何使用Electron使用JavaScript构建您的第一个桌面应用程序
electron 桌面程序 by Carol-Theodor Pelu 通过Carol-Theodor Pelu 如何使用Electron使用JavaScript构建您的第一个桌面应用程序 (How ...
给一个div innerhtml 后没有内容显示的问题_实战：仅用18行JavaScript构建一个倒数计时器...
有时候,你会需要构建一个JavaScript倒计时时钟.你可能会有一个活动.一个销售.一个促销或一个游戏.你可以用原生的JavaScript构建一个时钟,而不是去找一个插件.尽管有很多很棒的时钟插件, ...
如何使用 JavaScript 构建计算器应用程序
这个史诗般的教程通过描述如何使用该语言开发一个简单的计算器应用程序,为 JavaScript 新手提供了一个可靠的练习. 面向初学者的 javascript 项目(8 部分系列) 1 构建你的第一个 ...
使用 Vanilla JavaScript 构建自定义 SPA 路由器
介绍在本文中,我将解释如何使用 Vanilla JavaScript 构建自定义 SPA 路由器.我必须在没有任何使用框架的情况下构建一个 UI 项目,并且必须弄清楚如何处理路由,并发现您可以轻松地 ...
javascript做游戏_我用JavaScript构建了一个角色扮演游戏。你也可以这是如何做。...
javascript做游戏 by Robert Skalko 罗伯特·斯科尔科(Robert Skalko) 我用JavaScript构建了一个角色扮演游戏. 你也可以这是如何做. (I built ...
HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）
HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.) 著谢光磊译 ISBN 978-7-121-21226-0 ...
7个使用JavaScript构建数据可视化的实用工具库，希望你能喜欢
JavaScript运行网络.您可以在浏览器中使用它,也可以在服务器上使用它,并且可以将其用于移动应用程序. 当今的生态系统充满了强大的库和框架,可帮助工程师为任何平台构建功能强大,以用户为中心的应用 ...

使用 Lightbox 2 和 JavaScript 构建出色的图片库

使用 Lightbox 2 和 JavaScript 构建出色的图片库相关推荐

最新文章

热门文章