Lightbox/弹窗
jQuery支持移动触屏Lightbox插件
PetitQ
收藏
Swipebox 是一款支持桌面、移动触摸手机和平板电脑的 jquery Lightbox 插件。该 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>
在
<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 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 将在播放到最后一张图片时接着返回第一张图片播放。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
