Lightbox JS v2.0 实现图片点击放大与分组浏览

Lightbox JS 简介与演示

Lightbox JS 是一款简洁且兼容性良好的脚本，旨在实现图片在当前页面覆盖放大的效果。该脚本安装简便，并支持所有主流浏览器。

点击查看实际演示效果

具体使用方法如下：

安装配置步骤

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 文件路径正确无误。

激活与分组使用

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