插件描述：Swipebox 是一款可觸摸的 jQuery 燈箱效果插件，可用于桌面，移動和平板電腦。 支持移動設(shè)備滑動手勢導(dǎo)航，桌面電腦上可以用鍵盤導(dǎo)航，不支持 CSS3 過渡特性的瀏覽器使用 jQuery 降級處理，支持視網(wǎng)膜顯示，能夠通過 CSS 輕松定制。
主要特點
滑動手勢移動
鍵盤導(dǎo)航的桌面
CSS過渡使用jQuery后備
針對UI圖標支持視網(wǎng)膜
簡單的CSS定制
基本用法
使用Javascript
在您的頁面中添加jQuery和swipebox腳本
<script src="lib/jquery-2.0.3.js"></script>
<script src="source/jquery.swipebox.js"></script>
CSS
在您的頁面中添加swipebox CSS樣式標簽。
<link rel="stylesheet" href="source/swipebox.css">
HTML
使用特定的類為你的鏈接和使用title屬性為標題。
<a href="big/image.jpg" class="swipebox" title="My Caption">
<img src="small/image.jpg" alt="image">
</a>
綁定了“swipebox”類。
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
使用“rel”屬性
你可以添加一個REL屬性，你的鏈接到單獨的畫廊。
<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>
<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>
視頻支持
只需在您的href屬性粘貼視頻網(wǎng)址。該腳本會自動檢查它是否是一個視頻網(wǎng)址，并在打開的swipebox視頻。
<a class="swipebox-video" rel="視頻" href="#">My Videos</a>
動態(tài)加載的幻燈片
你可以通過一個數(shù)組對象傳遞給swipebox動態(tài)設(shè)置您的畫廊。
$("#gallery").click(function(e){
e.preventDefault();
$.swipebox([
{href:'big/image1.jpg', title:'My Caption'},
{href:'big/image2.jpg', title:'My Second Caption'}
]);
});
刷新方法
刷新方法可以讓你重新加載幻燈片，如果在DOM發(fā)生了變化。
var swipeboxInstance = $(".a:visible").swipebox();
// Use the refresh method after your event is completed
swipeboxInstance.refresh();
檢查打開狀態(tài)
if ($.swipebox.isOpen){
// do stuff
}
選項
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox({
useCSS : true, // false將強制使用的jQuery的動畫
hideBarsDelay : 3000, // 0始終顯示標題和動作條
videoMaxWidth : 1140, // 視頻最大寬度
beforeOpen: function(){}, // 被叫開幕前
afterClose: function(){} // 被叫結(jié)束后
});
});
</script>
