响应式jQuery插件图片插件-Simple Lightbox

 Array   高蒙   阅读(1698)   评论(4)   2016-12-15 16:23:59    Simple Lightbox Lightbox jQuery Lightbox插件 响应式Lightbox jQuery插件 


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

  • 响应式设计

  • 触控/触摸友好

  • 提供多项配置

  • 图像预加载

  • 支持 iOS / Android / Windows phone

  • 使用 CSS3 过度效果,并回退兼容旧浏览器

  • 支持 jQuery 1.x 和 2.x 版本

  • 支持键盘控制

浏览器兼容

IEChromeFirefoxOperaSafari
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.simplelightboxLightbox 开启前的事件
shown.simplelightboxLightbox 开启后的事件
close.simplelightboxLightbox 关闭前的事件
closed.simplelightboxLightbox 关闭后的事件

例如:

$('.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://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客