Lightbox JS v2.0 是一款轻量级脚本，用于在当前页面实现图片覆盖放大效果。本文详细介绍其安装步骤，包括引入 Prototype 和 Scriptaculous 库及 CSS 样式，以及通过 rel="lightbox" 属性激活单图或多图分组浏览功能。
Lightbox JS 简介与演示
Lightbox JS 是一款简洁且兼容性良好的脚本，旨在实现图片在当前页面覆盖放大的效果。该脚本安装简便，并支持所有主流浏览器。
点击查看实际演示效果
具体使用方法如下：
步骤 1 - 安装
安装配置步骤
1. Lightbox v2.0 依赖 Prototype 框架和 Scriptaculous 效果库。你需要在页面头部引入以下三个 JavaScript 文件。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2. 引入 Lightbox 的 CSS 样式文件，或者将 Lightbox 相关样式合并到你现有的样式表中。
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3. 检查 CSS 配置，确保 prev.gif、next.gif、loading.gif 和 close.gif 等图片资源以及 lightbox.js 文件路径正确无误。
步骤 2 - 激活
激活与分组使用
1. 在任意链接标签中添加 rel="lightbox" 属性以激活 Lightbox 效果。示例如下：
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
可选操作：利用 title 属性为图片添加说明文字。
2. 若需将一组相关图片进行分组浏览，请在 rel 属性中添加带方括号的组名。示例如下：
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
3. 每个页面的图片组数量以及每组内的图片数量均无限制。
下载链接：Lightbox JS v2.02