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 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.
via:http://www.w2bc.com/Article/21873
时间: 2024-10-09 07:12:13