[代码样式]Simple Lightbox – jQuery Lightbox插件

简介

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

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

浏览器兼容

IE9+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/simplelightbox.min.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/simple-lightbox.min.js"></script>

2、HTML

<div class="dowebok">
    <a href="https://www.dowebok.com/images/image1.jpg" rel="external nofollow" >
        <img src="https://www.dowebok.com/images/thumbs/thumb1.jpg" alt="" title="第一张图片描述">
    </a>
    <a href="https://www.dowebok.com/images/image2.jpg" rel="external nofollow" >
        <img src="https://www.dowebok.com/images/thumbs/thumb2.jpg" alt="" title="第二张图片描述">
    </a>
    <a href="https://www.dowebok.com/images/image3.jpg" rel="external nofollow" >
        <img src="https://www.dowebok.com/images/thumbs/thumb3.jpg" alt="" title="第三张图片描述">
    </a>
    ...
</div>

3、JavaScript

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

配置

选项

自定义事件

例如：

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

公共方法

例如：

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

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

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

百度网盘" name="Simple Lightbox – jQuery Lightbox插件" pass="" code=""]