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. 没有图片

    2012.11.03

    五个很实用的HTML5接口

    1.Element.classList cl…

  2. 没有图片

    2009.07.24

    将C盘转换为NTFS格式的命令

    在 Windows 2K 以上版本的操作系统…

  3. 没有图片

    2011.04.24

    WordPress团购主题插件Group Deals plugin

    现在非常流行团购,很多团购代码也应运而生,但…

  4. 没有图片

    2009.07.29

    WordPress主题 Atahualpa Theme 后台设置方法

    在上篇文章中为大家推荐了 Wordpress…

  5. 2012.08.01

    WordPress主题 X5 正式发布

    现在大家看到的是我的新作品,主题结构来自11…

  6. 没有图片

    2010.12.20

    《让子弹飞》高清DVD下载地址

    上篇日志已经给大家吊完了胃口,分享了《让子弹…

评论

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

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

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!