一款经典的 jQuery Lightbox 灯箱效果

一个灯箱效果的图片展示插件。

• 版本：
• jQuery v1.2.3+

• jQuery Lightbox v2.7.1

• github

实例预览

使用方法

载入 CSS 文件

1. <link rel="stylesheet" href="lightbox.css">

复制

载入 JavaScript 文件

1. <script src="jquery.js"></script> 
2. <script src="lightbox.js"></script> 

复制

DOM 结构

1. <a href="image-1.jpg" data-lightbox="image-1" data-title="文字说明">Image #1</a> 
2.  
3. <!-- 如果是一组相关的图片，可以对该组图片设置 data-lightbox 属性为相同的值。--> 
4. <a href="img/image-2.jpg" data-lightbox="group">Image #2</a> 
5. <a href="img/image-3.jpg" data-lightbox="group">Image #3</a> 
6. <a href="img/image-4.jpg" data-lightbox="group">Image #4</a> 

复制

   

以上内容设置好即可，会自动调用 Lightbox。

使用说明

支持标签 名称 描述

<a>	链接
<area>	图像映射区域

属性选项 名称 说明

rel	值以 "lightbox" 为开头时，表示需要使用 Lightbox 展示
data-lightbox	设置任意值时，表示需要使用 Lightbox 展示
title	Lightbox 展示时，显示的标题或说明文字
data-title
href	Lightbox 展示时，显示的图片

参数说明

注意：目前除了修改源码，不能在调用的时候修改参数（因为是自动调用的，并且参数没有暴露到外部），期待以后的更新能完善该功能。

名称 默认值 说明

fadeDuration	500	透明效果过渡时间 (ms)
fitImagesInViewport	true	根据窗口大小自动调整图片尺寸
resizeDuration	700	尺寸变化效果过渡时间
positionFromTop	50	与顶部的距离 (px)
showImageNumberLabel	true	显示页码标签
alwaysShowNavOnTouchDevices	false	在触摸设备上始终显示上下页按钮
wrapAround	false	持续显示上下页按钮

 

---

下载