jQuery灯箱插件simplelightbox

所属分类： JQ特效媒体图片展示

查看演示立即下载

插件描述：Simple Lightbox 是用在移动端和桌面端的，触摸友好的图像灯箱插件

Simple Lightbox

一款基于 jQuery 的 Lightbox 插件，它具有以下特点：

特征

响应式设计
触控/触摸友好
提供多项配置
图像预加载
支持 iOS / Android / Windows phone
使用 CSS3 过度效果，并回退兼容旧浏览器
支持 jQuery 1.x 和 2.x 版本
支持键盘控制

使用方法

安装

// YARN
yarn add simplelightbox
 
// Bower
bower install simplelightbox
 
// NPM
npm install simplelightbox

之后将 simple-lightbox(.min).css 和 simple-lightbox(.min).js 添加到您的页面中。

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="jq22">
    <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>

配置

选项

名称	类型	默认值	说明
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 关闭后的事件

例如：

$('.jq22 a').on('open.simplelightbox', function(){
    alert('准备开启 Simple Lightbox');
});

公共方法

名称	说明
open	开启 Lightbox
close	关闭 Lightbox
next	显示下一个
prev	显示上一个
destroy	销毁 Lightbox

例如：

var $jq22 = $('.jq22 a').simpleLightbox();
$jq22.next();

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：瀑布流两种方式(原创)
下一个特效：无