这是一款支持移动触摸设备的简洁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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!