简介
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();
演示地址:https://www.dowebok.com/demo/186/
用心去打造出中国最独具特色的资源网站,用每一滴汗水换回所有付出所得的喜悦!
发表评论