基于 jQuery支持移动触摸设备的Lightbox插件：Swipebox使用说明
基于 jQuery支持移动触摸设备的Lightbox插件：Swipebox使用说明
Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势，支持桌面电脑的键盘导航，并且支持视频的播放。
今天介绍一下Swipebox的使用步骤。
先看效果图： 2015101601
简要教程
使用方法
首先在<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 class="swipebox" title="My Caption" href="big/image.jpg">
<img src="small/image.jpg" alt="image" />
</a>调用插件
通过.swipebox选择器来绑定该lightbox的swipebox事件：
<script type="text/javascript">// <![CDATA[
;( function( $ ) {
$( '.swipebox' ).swipebox();
} )( jQuery );
// ]]></script>高级配置 画廊 你可以在超链接标签中添加一个rel属性来分割画廊图片
<!-- Gallery 1 -->
<a class="swipebox" href="big/image1.jpg" rel="gallery-1">
<img src="small/image1.jpg" alt="image" />
</a>
<a class="swipebox" href="big/image2.jpg" rel="gallery-1">
<img src="small/image2.jpg" alt="image" />
</a>
<!-- Gallery 2 -->
<a class="swipebox" href="big/image3.jpg" rel="gallery-2">
<img src="small/image3.jpg" alt="image" />
</a>
<a class="swipebox" href="big/image4.jpg" rel="gallery-2">
<img src="small/image4.jpg" alt="image" />
</a>视频支持 你可以将一个youtube或vimeo的视频URL放到href属性中，该lightbox插件会自动检测它是否是youtube 或 vimeo的视频，并用swipebox打开它。
<a class="swipebox-video" href="http://vimeo.com/29193046" rel="vimeo">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">// <![CDATA[
;( function( $ ) {
$( '.swipebox' ).swipebox( {
useCSS : true, // false will force the use of jQuery for animations
useSVG : true, // false to force the use of png for buttons
initialIndexOnArray : 0, // which image index to init when a array is passed
hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
hideBarsDelay : 3000, // delay before hiding bars on desktop
videoMaxWidth : 1140, // videos max width
beforeOpen: function() {}, // called before opening
afterOpen: null, // called after opening
afterClose: function() {} // called after closing
loopAtEnd: false // true will return to the first image after the last image is reached
} );
} )( jQuery );
// ]]></script>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.