转载

支持移动触摸的简洁jQuery图片Lightbox插件

简要教程

这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。该LightBox插件可以在移动手机和桌面设备中运行，它具有响应式，预加载图片，键盘支持等特点，非常实用。它的特点还有：

响应式设计

支持滑动触摸

易于安装使用

众多参数设置

支持预加载图片

支持Android, iOs 和 Windows phone

在旧的浏览器中对CSS3过渡效果进行回退

可以使用jQuery1.x或2.x

支持键盘控制

支持移动触摸的简洁jQuery图片Lightbox插件

查看演示下载插件

安装

可以通过npm或bower来安装该插件。

npm install simplelightbox bower install simplelightbox

或下载插件的压缩包，在页面中引入以下文件：

使用方法

HTML结构

该lightbox插件的基本HTML结构如下：

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该Lightbox插件。

var lightbox = $('.gallery a').simpleLightbox(options);

配置参数

参数	类型	默认值	描述
overlay	true	bool	是否显示遮罩层
spinner	true	bool	是否显示加载指示器
nav	true	bool	是否显示左右导航箭头
navText	[←‘,’→‘]	array	导航箭头文字或HTML标签
captions	true	bool	是否显示标题
captionSelector	'img'	string	如何获取标题，可以在 attr, data 或 text之间选择
captionType	'attr'	string	是否显示标题
captionsData	title	string	从给定的属性或data-title获取标题
close	true	bool	是否显示关闭按钮
closeText	'X'	string	关闭按钮上的文本
showCounter	true	bool	是否显示当前图片的序号
fileExt	png\|jpg\|jpeg\|gif	regexp	图片文件类型扩展名的正则表达式
animationSpeed	250	int	幻灯片模式中slide的动画速度
preloading	true	bool	是否预加载前一张和下一张图片
enableKeyboard	true	bool	是否允许键盘导航和使用ESC键关闭
loop	true	bool	是否循环图片
docClose	true	bool	是否在点击lightbox之外的区域时关闭它
swipeTolerance	50	int	swipe多少像素才显示下一张图片
className	'simple-lightbox'	string	包裹容器的class名称
widthRatio	0.8	float	图片宽度和屏幕宽度的比例
heightRatio	0.9	float	图片高度和屏幕高度的比例

事件

事件名称	描述
open.simplelightbox	该事件在lightbox打开之前触发
opened.simplelightbox	该事件在lightbox打开之后触发
close.simplelightbox	该事件在lightbox关闭之前触发
closed.simplelightbox	该事件在lightbox关闭之后触发

示例代码

$('.gallery a').on('open.simplelightbox', function () {   // do something… });

公共方法

名称	描述
open	通过给定的JQuery元素打开lightbox
close	表格当前打开的Lightbox
next	跳转到下一张图片
prev	跳转到前一张图片
destroy	销毁lightbox实例对象

示例代码：

var gallery = $('.gallery a').simpleLightbox(); gallery.next(); // Next Image

来源 jQuery之家

正文到此结束

所属分类：编程技术

本文标签： tab UI Android http 正则表达式 jquery HTML src 配置 CTO 参数安装响应式插件标题代码 key HTML5 实例 ip CSS Select windows IDE DOM
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

支持移动触摸的简洁jQuery图片Lightbox插件

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流