Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势，支持桌面电脑的键盘导航，并且支持视频的播放。
简要教程
Swipebox是一款支持桌面、移动触摸手机和平板电脑的 Lightbox插件。Swipebox的特点有：
- 支持手机的触摸手势
- 支持桌面电脑的键盘导航
- 通过回调提提供CSS过渡效果
- Retina支持UI图标
- CSS样式容易定制
使用方法
首先在<body>标签之前或<header>标签中引入和swipebox js文件。
在<header>标签中引入swipebox.css文件。
HTML结构
为超链接标签使用指定的class，使用title属性来指定图片的标题：
调用插件
通过.swipebox选择器来绑定该lightbox的swipebox事件：
高级配置
画廊
你可以在超链接标签中添加一个rel属性来分割画廊图片
视频支持
你可以将一个youtube或vimeo的视频URL放到href属性中，该lightbox插件会自动检测它是否是youtube 或 vimeo的视频，并用swipebox打开它。
My Videos
动态调用画廊
你可以通过一个数组来动态调用你的画廊：
$( '#gallery' ).click( function( e ) { e.preventDefault(); $.swipebox( [ { href:'big/image1.jpg', title:'My Caption' }, { href:'big/image2.jpg', title:'My Second Caption' } ] );} ); 检测状态
if ( $.swipebox.isOpen ) { // do stuff} 可用参数
- useCSS：设置为false将强制lightbox使用jQuery来动画。
- useSVG：设置为flase将lightbox使用png来制作按钮。
- initialIndexOnArray：当lightbox使用数组时使用该参数来设置下标。
- hideCloseButtonOnMobile：设置为true时lightbox将在移动设备上隐藏关闭按钮。
- hideBarsDelay：lightbox在桌面设备上隐藏信息条的延时时间。
- videoMaxWidth：lightbox视频的最大宽度。
- beforeOpen：lightbox打开前的回调函数。
- afterOpen：lightbox打开后的回调函数。
- afterClose：lightbox关闭后的回调函数。
- loopAtEnd：设置为true时lightbox将在播放到最后一张图片时接着返回第一张图片播放。
浏览器兼容
Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone.
via：