Lightbox/弹窗
支持移动手机jQuery图片LightBox插件
PetitQ
收藏
这是一款支持移动触摸设备的简洁 jQuery 图片 Lightbox 插件。该 LightBox 插件可以在移动手机和桌面设备中运行，它具有响应式，预加载图片，键盘支持等特点，非常实用。
- 响应式设计
- 支持滑动触摸
- 易于安装使用
- 众多参数设置
- 支持预加载图片
- 支持 Android, iOs 和 Windows phone
- 在旧的浏览器中对 CSS3 过渡效果进行回退
- 可以使用 jQuery1.x 或 2.x
- 支持键盘控制
下载插件的压缩包，在页面中引入以下文件：
也想出现在这里？联系我们吧
<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>
使用方法：
该 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 | 图片高度和屏幕高度的比例 |
示例代码：
$('.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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
