插件描述：Swipebox 是一款可觸摸的 jQuery 燈箱效果插件，可用于桌面，移動(dòng)和平板電腦。 支持移動(dòng)設(shè)備滑動(dòng)手勢(shì)導(dǎo)航，桌面電腦上可以用鍵盤(pán)導(dǎo)航，不支持 CSS3 過(guò)渡特性的瀏覽器使用 jQuery 降級(jí)處理，支持視網(wǎng)膜顯示，能夠通過(guò) CSS 輕松定制。
主要特點(diǎn)
滑動(dòng)手勢(shì)移動(dòng)
鍵盤(pán)導(dǎo)航的桌面
CSS過(guò)渡使用jQuery后備
針對(duì)UI圖標(biāo)支持視網(wǎng)膜
簡(jiǎn)單的CSS定制
基本用法
使用Javascript
在您的頁(yè)面中添加jQuery和swipebox腳本
<script src="lib/jquery-2.0.3.js"></script>
<script src="source/jquery.swipebox.js"></script>
CSS
在您的頁(yè)面中添加swipebox CSS樣式標(biāo)簽。
<link rel="stylesheet" href="source/swipebox.css">
HTML
使用特定的類為你的鏈接和使用title屬性為標(biāo)題。
<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”屬性
你可以添加一個(gè)REL屬性，你的鏈接到單獨(dú)的畫(huà)廊。
<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)址。該腳本會(huì)自動(dòng)檢查它是否是一個(gè)視頻網(wǎng)址，并在打開(kāi)的swipebox視頻。
<a class="swipebox-video" rel="視頻" href="#">My Videos</a>
動(dòng)態(tài)加載的幻燈片
你可以通過(guò)一個(gè)數(shù)組對(duì)象傳遞給swipebox動(dòng)態(tài)設(shè)置您的畫(huà)廊。
$("#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();
檢查打開(kāi)狀態(tài)
if ($.swipebox.isOpen){
// do stuff
}
選項(xiàng)
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox({
useCSS : true, // false將強(qiáng)制使用的jQuery的動(dòng)畫(huà)
hideBarsDelay : 3000, // 0始終顯示標(biāo)題和動(dòng)作條
videoMaxWidth : 1140, // 視頻最大寬度
beforeOpen: function(){}, // 被叫開(kāi)幕前
afterClose: function(){} // 被叫結(jié)束后
});
});
</script>
