Simple Lightbox – jQuery Lightbox插件

简介

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

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

浏览器兼容

IE Chrome Firefox Opera Safari
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 数组 [‘&larr;’,’&rarr;’] 左右导航的文本
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

思章老师

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2013.12.31

    如何制作 Mountain Lion 全新安装U盘(转)

    昨天搞到手一台 MACBook Pro 15…

  2. 没有图片

    2010.03.15

    DEDECMS标题中去掉斜线的办法

    在上一教程中,我通过使用“DedeCMS当前…

  3. 没有图片

    2010.10.09

    搜索图片,你用哪个引擎?

    本文是针对今天菠萝使用百度、谷歌和必应搜索图…

  4. 没有图片

    2010.05.05

    网页设计可用的免费图案和纹理资源

    对于设计者来说,收藏一些图案和纹理资源非常有…

  5. 没有图片

    2009.09.26

    Adobe CS3 系列软件完全清除方法(重装教程)

    前几天安装了Adobe公司的系列软件 - A…

评论

  1. 铁路客运量 2017.07.03 7:25下午

    太复杂了,没看懂!

  2. 土木坛子 2017.06.20 5:34下午

    复杂到有些害怕~哈哈,现在很少折腾技术主题等了。