基于 jQuery支持移动触摸设备的Lightbox插件

Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势，支持桌面电脑的键盘导航，并且支持视频的播放。

在线预览源码下载

简要教程

Swipebox是一款支持桌面、移动触摸手机和平板电脑的jQuery Lightbox插件。Swipebox的特点有：

支持手机的触摸手势
支持桌面电脑的键盘导航
通过jQuery回调提提供CSS过渡效果
Retina支持UI图标
CSS样式容易定制

使用方法

首先在<body>标签之前或<header>标签中引入jquery和swipebox js文件。

<script src="lib/jquery-2.0.3.js"></script>
<script src="src/js/jquery.swipebox.js"></script>

在<header>标签中引入swipebox.css文件。

<link rel="stylesheet" href="src/css/swipebox.css">

HTML结构

为超链接标签使用指定的class，使用title属性来指定图片的标题：

<a href="big/image.jpg" class="swipebox" title="My Caption"><img src="small/image.jpg" alt="image">
</a>

调用插件

通过.swipebox选择器来绑定该lightbox的swipebox事件：

<script type="text/javascript">;( function( $ ) {$( '.swipebox' ).swipebox();} )( jQuery );
</script>

高级配置

画廊

你可以在超链接标签中添加一个rel属性来分割画廊图片

<!-- Gallery 1 -->
<a rel="gallery-1" href="big/image1.jpg" class="swipebox"><img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="swipebox"><img src="small/image2.jpg" alt="image">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="big/image3.jpg" class="swipebox"><img src="small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="big/image4.jpg" class="swipebox"><img src="small/image4.jpg" alt="image">
</a>

视频支持

你可以将一个youtube或vimeo的视频URL放到href属性中，该lightbox插件会自动检测它是否是youtube 或 vimeo的视频，并用swipebox打开它。

<a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>

动态调用画廊

你可以通过一个数组来动态调用你的画廊：

$( '#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
}

可用参数

<script type="text/javascript">;( function( $ ) {$( '.swipebox' ).swipebox( {useCSS : true, // false will force the use of jQuery for animationsuseSVG : true, // false to force the use of png for buttonsinitialIndexOnArray : 0, // which image index to init when a array is passedhideCloseButtonOnMobile : false, // true will hide the close button on mobile deviceshideBarsDelay : 3000, // delay before hiding bars on desktopvideoMaxWidth : 1140, // videos max widthbeforeOpen: function() {}, // called before openingafterOpen: null, // called after openingafterClose: function() {} // called after closingloopAtEnd: false // true will return to the first image after the last image is reached} );} )( jQuery );
</script>