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

    2010.09.27

    Publisher 2010 的功能和优点

    利用 Microsoft Publisher 2010,您可以轻松创建、个性化和共享范围广泛且具有专业品质的出版物和市场营销材料。 利用 Publisher 2010,您还可以轻松地采用各种出版物类型来传达消息,从而节省时间和金钱。无论是创建小册子、新闻稿、明信片、贺卡还是电子邮件新闻稿,您都可以提供高质量的工作成果,而不需要具有图形设计经验。 使用 Publisher 2010 一步到位顺利完成任务。 创建具有视觉冲击力的出版物 Publisher 2010 提供了范围广泛的新工具和改进工具,把您打造成一个设计天才,您创建的内容绝对引人注目。 使用改进的图片编辑工具(包括平移、缩放和裁剪图像和图片占位符等功能),可以轻松地替换图像,同时保留页面布局。轻松微调每张图片以使出版物的外观效果绝对最佳。 像专业人员一样使用新的对象对齐技术设计和重新组织页面。此技术提供了视觉指南来帮助您毫不费力地对齐和定位内容,但最终版式始终由您决定。 直接从 Publisher 2010 中插入和自定义预建的内容构建基块(内置的和来自 Publisher…

  2. 没有图片

    2012.04.23

    自定义WordPress作者信息

    WordPress的作者信息默认的为AIM, Yahoo IM, Jabber等,但针对中国用户,这个并不是我们所需要的,那我们可以先屏蔽这些信息,之后添加我们自己需要的个人信息,比如新浪微博、腾讯微博等,屏蔽默认信息的方法: 将下面这段代码放到functions.php中就可以了: add_filter('user_contactmethods','hide_profile_fields',10,1); function hide_profile_fields( $contactmethods ) { unset($contactmethods['aim']); unset($contactmethods['jabber']); unset($contactmethods['yim']); return $contactmethods; } 这样就把默认的信息干掉了,下面是添加我们自己需要的个人信息的方法: 将下面的代码加入到functions.php中就可以了: function my_new_contactmethods( $contactmethods…

  3. 2012.09.15

    最专业的屏幕录像及视频编辑软件 Camtasia Studio 8.0 注册版

    由顶级开发公司TechSmith出品的 Camtasia Studio 是一款包含了屏幕录像、视频编辑、视频菜单制作、视频录音配音、视频发布等一系列的强大功能的专业录屏与视频创作套件。可以在任何的屏幕颜色模式下,录制屏幕上的一切!并允许你在录制时为鼠标动作等特别需求添加特效。其内置的编辑器支持绝大多数视频格式及Flash、GIF的后期编辑创作。它还可以集成到 Microsoft PowerPoint 中快速录制PPT视频并将其转化为你想要的视频模式。总之,Camtasia Studio可谓最专业的屏幕录制及编辑软件! Camtasia Studio 8.0 注册说明: 1、安装时使用以下信息注册: Name:lisizhang.com Key:ACUFF-ZNWAC-PANMB-CC7NG-TM377 2、运行前,将以下信息写入系统Hosts文件:写入方法: 127.0.0.1 65.52.240.48 127.0.0.1 activation.cloud.techsmith.com 1、手动进入目录“(C:\Windows\System32\drivers\etc)”使用记事本修改; 2、使用…

  4. 没有图片

    2010.02.19

    最全的分页CSS样式代码

    为了给一公司设计网站,整理了一下分页CSS代码,对我来说非常有用,大家随便拿去用,省去写代码的麻烦。 点击查看预览效果 24款较经典的Page翻页分页css代码-网页特效观止-网页特效代码|JsCode.CN| Digg Style < 1234567...199200 > Yahoo Style < 1234567...199200 > New Yahoo! Style < Prev1234567...199200Next > Meneame Style <…

  5. 没有图片

    2011.11.02

    安装Windows8 同时分享下载及安装教程

    今天正式下载了Windows 8 开发版,并在自己的电脑上安装测试,最后安装成功,甚是喜悦,现在花生与大家分享一下Windows 8 的下载及安装教程,希望对大家有用。 Windows 8 下载 这次发布的Windows 8预览版有三个不同版本,其一是自带了全套开发工具,仅支持64位,另外两个没有开发工具,支持32位和64位。建议从事开发工作或者对此感兴趣的朋友下载第一个,普通用户下载第二个或者第三个。 1、包含全套开发工具的Windows 8开发者预览版(x64 64位) 语言:英语 文件格式:ISO光盘镜像 体积:4.8GB SHA1校验码:6FE9352FB59F6D0789AF35D1001BD4E4E81E42AF 镜像内容: - 64位Windows 8开发者预览版 -…

  6. 没有图片

    2012.10.20

    HTML5在线视频播放器 FlowPlayer

    FlowPlayer 是一个用Flash开发的在Web上的视频播放器,可以很容易将它集成在任何的网页上。支持HTTP以及流媒体传输。此代码由HTML5编写,追求最新体验的朋友可以使用了。 代码首页 | 代码下载 | 代码演示 | Source code

评论

  1. 铁路客运量 2017.07.03 7:25

    太复杂了,没看懂!

  2. 土木坛子 2017.06.20 5:34

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

About

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