jQuery支持移动触摸设备的Lightbox插件
简要教程
Swipebox是一款支持桌面、移动触摸手机和平板电脑的jQuery Lightbox插件。Swipebox的特点有:
使用方法首先在<body>标签之前或<header>标签中引入jquery和swipebox js文件。
<scriptsrc="lib/jquery-2.0.3.js"></script> <scriptsrc="src/js/jquery.swipebox.js"></script>
在<header>标签中引入swipebox.css文件。
<linkrel="stylesheet"href="src/css/swipebox.css">
HTML结构为超链接标签使用指定的class,使用title属性来指定图片的标题:
<a href="big/image.jpg"class="swipebox"title="My Caption"> <imgsrc="small/image.jpg"alt="image"> </a>
调用插件通过.swipebox选择器来绑定该lightbox的swipebox事件: <script type="text/javascript"> ;(function( $ ) { $('.swipebox').swipebox(); } )( jQuery ); </script> 高级配置画廊你可以在超链接标签中添加一个rel属性来分割画廊图片 <!-- Gallery 1 --> <arel="gallery-1"href="big/image1.jpg"class="swipebox"> <imgsrc="small/image1.jpg"alt="image"> </a> <arel="gallery-1"href="big/image2.jpg"class="swipebox"> <imgsrc="small/image2.jpg"alt="image"> </a> <!-- Gallery 2 --> <arel="gallery-2"href="big/image3.jpg"class="swipebox"> <imgsrc="small/image3.jpg"alt="image"> </a> <arel="gallery-2"href="big/image4.jpg"class="swipebox"> <imgsrc="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>
浏览器兼容Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone.
|