这是一款支持移动触摸设备的简洁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