使用 Lightbox 2构建出色的图片库
http://www.ibm.com/developerworks/cn/web/wa-ltbox/
使用简单的 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 文件
现在您需要使您的 Web 站点可以访问所有 Lightbox 文件 — 包括它使用的图片和 CSS。幸运的是，Lightbox 下载已经对此有所准备。它使用标准的目录名称，比如 images/、css/ 和 js/。因此，您可以将这三个目录及其内容复制到您的站点的根目录，为下一步做好准备。
注意：默认的 Lightbox 下载包含一个 index.html 文件。您不能 将它复制到 Web 根目录，因为这很可能会覆盖您的站点的索引页面。该页面是一组安装说明，但在本文中，可以删除 index.html 避免混淆。 引用刚才那三个与 Lightbox 相关的文件
将文件放置到正确的位置之后，就可以引用这些文件了。下面是 3 行 JavaScript 代码，您必须将其添加到需要使用 Lightbox 的页面：
将脚本放到哪个目录？ 传统的方法建议将所有脚本都放到您的站点上一个称为 scripts/ 的目录。因此脚本的路径可能是 scripts/prototype.js。但是最近脚本目录的命名越来越有针对性。例如 JavaScript 存放在 js/ 目录中，而 ASP.NET 脚本存放在 asp/ 目录中。Lightbox 使用的就是这种命名模式。如果您已经在以前的站点中使用 scripts/ 作为目录，可能需要作一些调整。