简介
Simple Lightbox 是一款基于 jQuery 的 Lightbox 插件,它具有以下特点:
- 响应式设计
- 触控/触摸友好
- 提供多项配置
- 图像预加载
- 支持 iOS / Android / Windows phone
- 使用 CSS3 过度效果,并回退兼容旧浏览器
- 支持 jQuery 1.x 和 2.x 版本
- 支持键盘控制
浏览器兼容
IE9+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
使用方法
1、引入文件
<link rel="stylesheet" href="css/simplelightbox.min.css"> <script src="js/jquery.min.js"></script> <script src="js/simple-lightbox.min.js"></script>
2、HTML
<div class="dowebok"> <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>
3、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 关闭后的事件 |
例如:
$('.dowebok a').on('open.simplelightbox', function(){ alert('准备开启 Simple Lightbox'); });
公共方法
名称 | 说明 |
---|---|
open | 开启 Lightbox |
close | 关闭 Lightbox |
next | 显示下一个 |
prev | 显示上一个 |
destroy | 销毁 Lightbox |
例如:
var $dowebok = $('.dowebok a').simpleLightbox(); $dowebok.next();
官方主页:http://andreknieriem.de/simple-lightbox/
GitHub 地址:https://github.com/andreknieriem/simplelightbox
太复杂了,没看懂!
复杂到有些害怕~哈哈,现在很少折腾技术主题等了。