支持移动触摸的简洁jQuery图片Lightbox插件
简要教程
这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。该LightBox插件可以在移动手机和桌面设备中运行，它具有响应式，预加载图片，键盘支持等特点，非常实用。它的特点还有：
响应式设计
支持滑动触摸
易于安装使用
众多参数设置
支持预加载图片
支持Android, iOs 和 Windows phone
在旧的浏览器中对CSS3过渡效果进行回退
可以使用jQuery1.x或2.x
支持键盘控制
查看演示 下载插件
安装
可以通过npm或bower来安装该插件。
npm install simplelightbox bower install simplelightbox
或下载插件的压缩包，在页面中引入以下文件：
使用方法
HTML结构
该lightbox插件的基本HTML结构如下：
初始化插件
在页面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 来源 jQuery之家
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
