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。所有现代的浏览器（和几个旧浏览器）都直接支持 JavaScript，这确保您的页面在大部分浏览器上都很好用。尽管确实存在其他很好的基于插件的技术（比如 Flash 或 Microsoft® 控件套装），JavaScript 都是所有浏览器的一部分。因此，您的用户不需要下载特别的组件，或担心浏览器的更新。几乎每个使用浏览器的计算机用户都能按原样查看到您设计的 Lightbox。
Lightbox 不仅是用 JavaScript 构建的，而且用的还是跨浏览器 JavaScript。就是说 Lightbox 可用于任何 现代浏览器，并且在各种浏览器上显示的效果是一样的。Internet Explorer、Safari、Firefox 和 Opera — 都以相同的方式处理 Lightbox 代码。这意味着使用 Lightbox 时，您构建的代码和页面不要求用户选择特定的浏览器（或操作系统）。反过来也就意味着更多的用户、更多的人能够看到您的图片（您的岳母不会总打电话索要您的孩子的近照了，因为在网上就能看到）。这不错，不是吗？
最后，Lightbox 实际上建立在两个构建良好的 JavaScript 库的基础之上，即 Prototype 和 Scriptaculous。Prototype 提供一些处理页面及其对象的实用函数，而 Scriptaculous 则添加大量的显示效果。它们已经存在好几年，并且是经过严谨测试的标准 JavaScript，可以在各种现代浏览器上使用。因此，Lightbox 是构建在坚实的代码之上的，而不是从头构建的（从而引入了 bug）。
  |
|
与其他 JavaScript 库一样，设置 Lightbox 非常简单。以下是详细步骤。
在本文的 参考资料 小节单击 “Lightbox 2 Web 站点” 链接，访问 Lightbox Web 站点（实际上，是 Lightbox 2 站点）。在导航的左侧，单击 “Download” 链接。此时，您的浏览器应该类似于图 2。
图 2. Lightbox 下载小节
单击大号字体的 Lightbox 链接将获得一个 ZIP 文件，名称类似于 lightbox2.04.zip（根据各个版本略有不同）。您可以将其解压缩到一个称为 lightbox2/ 的文件夹。图 3 展示了下载文件夹包含的内容：非常简单。
图 3. Lightbox 下载内容
|
|
现在您需要使您的 Web 站点可以访问所有 Lightbox 文件 — 包括它使用的图片和 CSS。幸运的是，Lightbox 下载已经对此有所准备。它使用标准的目录名称，比如 images/、css/ 和 js/。因此，您可以将这三个目录及其内容复制到您的站点的根目录，为下一步做好准备。
注意：默认的 Lightbox 下载包含一个 index.html 文件。您不能 将它复制到 Web 根目录，因为这很可能会覆盖您的站点的索引页面。该页面是一组安装说明，但在本文中，可以删除 index.html 避免混淆。
将文件放置到正确的位置之后，就可以引用这些文件了。下面是 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 的效果。
首先，打开 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 引用，如清单 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）分离出来能提供很大的灵活性。
|
|
这是容易疏忽的另一个步骤：确保 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>
|
最后一个步骤很简单：每个 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>
|
接下来仅需将更改保存到 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>
|
重新加载更改后的图片库。图 6 展示了选中的图片。
图 6. 含有 20 张图片的组中的第 1 张图片
乍看一眼，好像没有什么区别。但这里有一些细微的差别。首先，现在的图片库中的图片标有编号，当前显示的图片是 “20 张图片中的第 1 张”。
现在，将鼠标停在当前的图片上就会显示 “NEXT” 按钮。如果这不是该图片组的第 1 张图片，还会显示一个 “PREV” 按钮。使用这些按钮可以导航到下一张或上一张图片。图 7 显示了 “NEXT” 按钮。
图 7. 可以在一个组中前进或后退
您可以在同一个页面上创建许多不同的图片库，这只需在方括号中使用不同的组名，方括号必须是值为 “lightbox” 的 rel 属性。这样，您就可以拥有一个与水相关的图片集，一个与人脸有关的图片集，等等。
但是要避免乱用或滥用图片库。作为摄影师或设计师，您很清楚为什么这张图片放在这个图片库，而不是另一张。您还可能专门设计页面来突出这些差别。但对于一般的 Web 用户，这些差别可能看不出来，或者至少不明显。对于这种情况，多个图片库会造成混乱。为什么不显示所有的图片？为什么在这张图片上可以点击 NEXT，而在另一张上不行？
如果不是很清楚，最好使用一个图片库，将页面上的所有图片都包含在其中，这样比较直观明了，不会把用户弄糊涂。
|
|
Lightbox 的另一个很好的特性是可以显示一些与图片相关的信息。就像可以给图片库添加小标题一样，也可以为图片添加标题。
您已经使用 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 添加的标题必须是惟一的。事实上，并不是为图片本身添加标题；而是要修改 img 元素。这会导致一个常见的错误：图像的 alt 属性与图像 Lightbox 中显示的内容毫不相关。这是好是坏还存在争议，但这是实际 存在的。
这里的目标是尽量使 Lightbox 简洁明了。因此，如果要为图片添加 alt 属性，或一个很长的描述（使用 longdesc），添加 Lightbox 标题时不需要更改这些属性。事实上，我们鼓励您为图片添加 alt 属性，毕竟 XHTML 要求页面上的所有图片都有这个属性。
|
|
到目前为止，所提到的内容都是 “标准的” Lightbox 特性。但它还有更多 其他特性，尤其是在利用 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 有一个很明显的问题：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 就是一个非常健壮的工具，您可以将它添加到您的工具箱中。
