支持移动触摸的jQuery图片Lightbox插件

简介

这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。该LightBox插件可以在移动手机和桌面设备中运行，它具有响应式，预加载图片，键盘支持等特点，非常实用。它的特点还有：

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

在线演示及下载

在线演示:
http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Simple Lightbox/

下载页面

使用方法

可以通过npm或bower来安装该插件。

npm install simplelightbox
bower install simplelightbox

或者下载该插件直接引用

引入文件

<link rel="stylesheet" href="css/simplelightbox.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/simple-lightbox.min.js"></script>

HTML

<div class="jqhtml">
    <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>

JavaScript

$(function(){
    $('.dowebok a').simpleLightbox();
});

配置

选项

自定义事件

示例

$('.jqhtml a').on('open.simplelightbox', function(){
    // do something…
});

公共方法

示例：

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

官方主页：http://andreknieriem.de/simple-lightbox/

GitHub 地址：https://github.com/andreknieriem/simplelightbox