支持移动触摸的jQuery图片Lightbox插件
简介
这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。该LightBox插件可以在移动手机和桌面设备中运行,它具有响应式,预加载图片,键盘支持等特点,非常实用。它的特点还有:
- 响应式设计
- 触控/触摸友好
- 提供多项配置
- 图像预加载
- 支持 iOS / Android / Windows phone
- 使用 CSS3 过度效果,并回退兼容旧浏览器
- 支持 jQuery 1.x 和 2.x 版本
- 支持键盘控制
在线演示及下载
使用方法
可以通过npm或bower来安装该插件。
npm install simplelightbox
bower install simplelightbox
或者下载该插件直接引用
引入文件
<link rel="stylesheet" href="css/simplelightbox.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/simple-lightbox.min.js"></script>
HTML
<div class="jqhtml">
<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>
JavaScript
$(function(){
$('.dowebok a').simpleLightbox();
});
配置
选项
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
overlay | 布尔值 | true | 显示遮罩 |
spinner | 布尔值 | true | 显示 Loading 效果 |
nav | 布尔值 | true | 显示左右导航 |
navText | 数组 | [‘←’,’→’] | 左右导航的文本 |
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 关闭后的事件 |
示例
$('.jqhtml a').on('open.simplelightbox', function(){
// do something…
});
公共方法
名称 | 说明 |
---|---|
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
支持移动触摸的jQuery图片Lightbox插件的更多相关文章
- ImageLightbox.js – 响应式的图片 Lightbox 插件
ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
- 十个jQuery图片画廊插件推荐
jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视.下面为你介绍了10个最有美感,创新性和创造性的jQu ...
- jquery图片播放插件Fancybox使用详解
今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...
- Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
- 5 款最新的 jQuery 图片裁剪插件
这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能. Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能.Cropit ...
随机推荐
- android注解使用具体解释(图文)
在使用Java的SSH框架的时候,一直在感叹注解真是方便啊,关于注解的原理,大家能够參考我的还有一片文章Java注解具体解释. 近期有时间研究了android注解的使用,今天与大家分享一下. andr ...
- JS0基础学习笔记(1)
为了须要,最近開始学习JS相关知识.基本的方式是通过看视频以及查阅相关手冊.并动手实践,亲手写出每一个小案例,以下是相关代码(每一个案例用分隔线隔开). <!DOCTYPE html> & ...
- 常见的DP优化类型
常见的DP优化类型 1单调队列直接优化 如果a[i]单调增的话,显然可以用减单调队列直接存f[j]进行优化. 2斜率不等式 即实现转移方程中的i,j分离.b单调减,a单调增(可选). 令: 在队首,如 ...
- 麦森数--NOIP2003
题目描述 形如2P−12^{P}-12P−1 的素数称为麦森数,这时PPP 一定也是个素数.但反过来不一定,即如果PPP 是个素数,2P−12^{P}-12P−1 不一定也是素数.到1998年底,人们 ...
- Fisher 线性判别
Multiplying both sides of this result by wT and adding w0, and making use of y(x)=wTx+w0 and y(xΓ)= ...
- 5-8 第五天 微信 JS-SDK
SDK的难点不多,但是容易出错的地方特别多.几乎任何一个环节都会犯错误. 难道没有域名就不让你测了吗?别担心,有公众测试号, 域名这个代理呢是通过QQ浏览器的服务器调试,来绑定这个端口的,把这个服务开 ...
- preg_match_all匹配网络上文件
<?php$ssa=file_get_contents("http://www.oschina.net/code/snippet_4873_5256");preg_match ...
- # 深入理解Redis(二)——内存管理的建议与技巧
引语 随着使用Redis的深入,我们不可避免的需要深入了解优化Redis的内存,本章将重点讲解Redis的内存优化之道,同时推荐大家阅读memory-optimization一文. 想要高效的使用Re ...
- C#开发微信公众号——网页开发之微信网页授权
首先咱们先看下公众号的文档里面的介绍 上述图片的文字描述就是讲述了网页授权有什么用,就是为了获取微信用户的基本信息:授权回调域名的规范,说到域名回调的事情就不得不提一下设置网页授权域名 最好将这三个域 ...
- create-react-app 引入ant design 及 使用 less
全局引入: 第一步:全局安装 create-react-app npm install create-react-app -g 第二步:安装 yarn npm install -g yarn 第三步: ...