这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。该LightBox插件可以在移动手机和桌面设备中运行，它具有响应式，预加载图片，键盘支持等特点，非常实用。它的特点还有：
- 响应式设计
- 支持滑动触摸
- 易于安装使用
- 众多参数设置
- 支持预加载图片
- 支持Android, iOs 和 Windows phone
- 在旧的浏览器中对CSS3过渡效果进行回退
- 可以使用jQuery1.x或2.x
- 支持键盘控制
安装
可以通过npm或bower来安装该插件。
npm install simplelightbox
bower install simplelightbox
或下载插件的压缩包，在页面中引入以下文件：
<link href='dist/simplelightbox.min.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="dist/simple-lightbox.js"></script>
使用方法
HTML结构
该lightbox插件的基本HTML结构如下：
<div class="gallery">
<a href="images/image1.jpg" class="big"><img src="images/thumbs/thumb1.jpg" alt="" title="Image" /></a>
<a href="images/image2.jpg"><img src="images/thumbs/thumb2.jpg" alt="" title=""/></a>
<a href="images/image3.jpg"><img src="images/thumbs/thumb3.jpg" alt="" title="Beautiful Image"/></a>
<a href="images/image4.jpg"><img src="images/thumbs/thumb4.jpg" alt="" title=""/></a>
<div class="clear"></div>
<a href="images/image5.jpg"><img src="images/thumbs/thumb5.jpg" alt="" title=""/></a>
<a href="images/image6.jpg"><img src="images/thumbs/thumb6.jpg" alt="" title=""/></a>
<a href="images/image7.jpg" class="big"><img src="images/thumbs/thumb7.jpg" alt="" title=""/></a>
<a href="images/image8.jpg"><img src="images/thumbs/thumb8.jpg" alt="" title=""/></a>
<div class="clear"></div>
<a href="images/image9.jpg" class="big"><img src="images/thumbs/thumb9.jpg" alt="" title=""/></a>
<a href="images/image10.jpg"><img src="images/thumbs/thumb10.jpg" alt="" title=""/></a>
<a href="images/image11.jpg"><img src="images/thumbs/thumb11.jpg" alt="" title=""/></a>
<a href="images/image12.jpg"><img src="images/thumbs/thumb12.jpg" alt="" title=""/></a>
<div class="clear"></div>
</div>
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该Lightbox插件。
var lightbox = $('.gallery a').simpleLightbox(options);
配置参数
| 参数 | 类型 | 默认值 | 描述 |
| overlay | true | bool | 是否显示遮罩层 |
| spinner | true | bool | 是否显示加载指示器 |
| nav | true | bool | 是否显示左右导航箭头 |
| navText | [←‘,’→‘] | array | 导航箭头文字或HTML标签 |
| captions | true | bool | 是否显示标题 |
| captionSelector | 'img' | string | 如何获取标题，可以在 attr, data 或 text之间选择 |
| captionType | 'attr' | string | 是否显示标题 |
| captionsData | title | string | 从给定的属性或data-title获取标题 |
| close | true | bool | 是否显示关闭按钮 |
| closeText | 'X' | string | 关闭按钮上的文本 |
| showCounter | true | bool | 是否显示当前图片的序号 |
| fileExt | png|jpg|jpeg|gif | regexp | 图片文件类型扩展名的正则表达式 |
| animationSpeed | 250 | int | 幻灯片模式中slide的动画速度 |
| preloading | true | bool | 是否预加载前一张和下一张图片 |
| enableKeyboard | true | bool | 是否允许键盘导航和使用ESC键关闭 |
| loop | true | bool | 是否循环图片 |
| docClose | true | bool | 是否在点击lightbox之外的区域时关闭它 |
| swipeTolerance | 50 | int | swipe多少像素才显示下一张图片 |
| className | 'simple-lightbox' | string | 包裹容器的class名称 |
| widthRatio | 0.8 | float | 图片宽度和屏幕宽度的比例 |
| heightRatio | 0.9 | float | 图片高度和屏幕高度的比例 |
事件
| 事件名称 | 描述 |
| open.simplelightbox | 该事件在lightbox打开之前触发 |
| opened.simplelightbox | 该事件在lightbox打开之后触发 |
| close.simplelightbox | 该事件在lightbox关闭之前触发 |
| closed.simplelightbox | 该事件在lightbox关闭之后触发 |
示例代码
$('.gallery a').on('open.simplelightbox', function () {
// do something…
});
公共方法
| 名称 | 描述 |
| open | 通过给定的JQuery元素打开lightbox |
| close | 表格当前打开的Lightbox |
| next | 跳转到下一张图片 |
| prev | 跳转到前一张图片 |
| destroy | 销毁lightbox实例对象 |
示例代码：
var gallery = $('.gallery a').simpleLightbox();
gallery.next(); // Next Image
