如何使用Lightbox 2.doc

使用 Lightbox 2构建出色的图片库 /developerworks/cn/web/wa-ltbox/使用简单的 JavaScript 库创建带有自定义控件的漂亮图片级别： 初级Brett D. McLaughlin, Sr., 作家和编辑, OReilly 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 的页面：您还需要添加一条到 Lightbox CSS 样式表的链接：在深入了解这些脚本和样式表的功能之前，您需要一个示例页面。回页首构建一个简单的示例应用程序开始之前，我们需要一个带有一些图片的页面。清单 1 展示了一个图片库页面的 HTML。接下来，将该 HTML 输入到您的编辑器，这可以通过复制粘贴来实现，也可以从示例中下载这些代码（从 参考资料 小节获得）。清单 1. 示例图片库的 HTML Image Gallery Image Gallery 清单 2 是该示例页面的 CSS。清单 2. 示例图片库的 CSS*border: 0;margin: 0;padding: 0;bodybackground: #fff;color: #777;padding: 50px;#page position: relative;#images float: left; width: 600px;#details color: #000;h1background: 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 imgbackground: #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 libackground: #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 脚本（在上下文中） Image Gallery 这些 script 引用必须 按照这种特定的顺序排列。后一个脚本将引用前一个脚本中的函数，因此顺序很重要。如果混乱了顺序，页面将出现错误，所以要格外注意：先引用 Prototype，然后是 Scriptaculous，最后才是 Lightbox。引用正确的 CSS接下来，添加一个 CSS 引用，如清单 4 所示。清单 4. 引用 Lightbox CSS（在上下文中） Image Gallery 很容易漏掉这个步骤，因为 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. 为每个图片添加链接 Image Gallery Image Gallery 将 Lightbox 连接到每个图片最后一个步骤很简单：每个 a 元素都需要一个值为 “lightbox” 的新属性 rel。仅需将该属性添加到围绕想要在 Lightbox 中显示的图片的每个链接。清单 6 展示了这一更改。清单 6. 围绕每一个图片添加链接 Image Gallery Image Gallery 检查 Lightbox 的实际效果接下来仅需将更改保存到 HTML 并加载（或重新加载）图片库。单击图片，它就会以动画的形式在 Lightbox 中打开，并且是全尺寸的。查看图 5，看看在 Firefox 浏览器中的显示效果如何。图 5. 使用 Lightbox 的图片库每个图片都出现在一个优美的、高对比度的框中。其余的图片变暗，突出了选中的图片。当然，这里还有一个方便