版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84180718
简介
这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。该LightBox插件可以在移动手机和桌面设备中运行，它具有响应式，预加载图片，键盘支持等特点，非常实用。它的特点还有：- 响应式设计
- 触控/触摸友好
- 提供多项配置
- 图像预加载
- 支持 iOS / Android / Windows phone
- 使用 CSS3 过度效果，并回退兼容旧浏览器
- 支持 jQuery 1.x 和 2.x 版本
- 支持键盘控制
在线演示及下载
在线演示: http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Simple Lightbox/使用方法
可以通过npm或bower来安装该插件。
npm install simplelightbox
bower install simplelightbox
或者下载该插件直接引用
引入文件
<link rel="stylesheet" href="css/simplelightbox.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/simple-lightbox.min.js"></script>
HTML
<div class="jqhtml">
<a href="images/image1.jpg">
<img src="images/thumbs/thumb1.jpg" alt="" title="第一张图片描述">
</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="第三张图片描述">
</a>
...
</div>
JavaScript
$(function(){
$('.dowebok a').simpleLightbox();
});
配置
选项
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| overlay | 布尔值 | true | 显示遮罩 |
| spinner | 布尔值 | true | 显示 Loading 效果 |
| nav | 布尔值 | true | 显示左右导航 |
| navText | 数组 | [‘←’,’→’] | 左右导航的文本 |
| captions | 布尔值 | true | 显示标题/描述 |
| captionsData | 字符串 | title | 标题/描述来源，可指定 title 或 data-title |
| close | 布尔值 | true | 显示关闭按钮 |
| closeText | 整数 | 123456 | 关闭按钮的文本 |
| fileExt | 正则表达式 | ‘png|jpg|jpeg|gif’ | 限制图片格式 |
| animationSpeed | 整数 | 250 | 动画过度时间 |
| preloading | 布尔值 | true | 预加载图片 |
| enableKeyboard | 布尔值 | true | 键盘支持，方向键控制，Esc 退出 |
| loop | 布尔值 | true | 循环 |
| docClose | 布尔值 | true | 点击空白处关闭 |
| swipeTolerance | 整数 | 50 | 移动设备上滑动多少像素开始切换 |
| className | 字符串 | simple-lightbox | 添加 class |
| widthRatio | 浮点数 | 0.8 | 图像宽度于屏幕宽度的的比例 |
| heightRatio | 浮点数 | 0.9 | 图像宽度于屏幕高度的的比例 |
自定义事件
| 名称 | 说明 |
|---|---|
| show.simplelightbox | Lightbox 开启前的事件 |
| shown.simplelightbox | Lightbox 开启后的事件 |
| close.simplelightbox | Lightbox 关闭前的事件 |
| closed.simplelightbox | Lightbox 关闭后的事件 |
示例
$('.jqhtml a').on('open.simplelightbox', function(){
// do something…
});
公共方法
| 名称 | 说明 |
|---|---|
| open | 开启 Lightbox |
| close | 关闭 Lightbox |
| next | 显示下一个 |
| prev | 显示上一个 |
| destroy | 销毁 Lightbox |
var $dowebok = $('.dowebok a').simpleLightbox();
$dowebok.next();
