PhotoSwipe 是專為移動觸摸設備設計的相冊/畫廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏覽器.底層實現基於HTML/CSS/JavaScript,是一款免費開源的相冊產品。
為誰而用
讓移動站點的相冊體驗和原生App一樣的設計師和開發者。
絕佳特性
PhotoSwipe提供給用戶一個熟悉又直觀的相冊交互界面。
官方網站
http://www.photoswipe.com/
源碼示例
http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-3.0.5.zip
Github
https://github.com/codecomputerlove/PhotoSwipe
在線demo
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
兼容特性
PhotoSwipe兼容大量的移動設備以及所有流行的JavaScript類庫/開發框架. 既有基於jQuery的版本,也有不依賴jQuery的版本，還有兼容jQuery Mobile的版本。當然，All In One，全在源碼示例包裡。
如何使用
PhotoSwipe是一個自身獨立的JavaScript庫，可以很方便地集成進你的網站。針對移動浏覽器(webkit)進行了大量的優化,當然，對於桌面浏覽器，以及jQueryMobile，在源碼包內也提供了相應的版本.
類庫引用
<!-- photoswipe 之前先引用klass,如果需要提高加載速度,可以給 script 加上 defer 標記/屬性-->
<script type="text/javascript" src="klass.min.js"></script>
<!-- 重要提示,如果不使用jQuery版本，在IE下面會出錯，當然，使用jQuery版本，則需要引入jQuery-->
<script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>
調用代碼
/* 添加DOMContentLoaded 事件監聽,類似於jQuery的 ready函數.
默認方式 examples/01-default.html
無縮略圖模式請查看.examples/09-exclusive-mode-no-thumbnails.html
*/
// PhotoSwipe.attach 方法接收3個參數(HTML元素集合,可選配置信息,可選多實例時string類型的ID)
document.addEventListener('DOMContentLoaded', function(){
//設置 PhotoSwipe綁定為 id為Gallery的容器下的所有<a>標簽.點擊就會激活
// 此處的對象，就是PhotoSwipe實例，可以使用相應的方法,例如 show(0),hide()等.
var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );
}, false);
如果使用jQuery，則調用代碼如下：
//jQuery 版,對應的js文件也需要變化
// 示例詳見examples/02-jquery.html
$(document).ready(function(){
// 此處的對象，就是PhotoSwipe實例，可以使用相應的方法,例如 show(0),hide()等.
var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
});
HTML代碼
<!-- ul li 之類是用於顯示縮略圖的,也可以根據需要調整.<a>下面的<img> 元素,即為縮略圖,如果不需要，則src設置為空即可 -->
<ul id="Gallery">
<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>
參數說明
1.allowUserZoom: 允許用戶雙擊放大/移動方式查看圖片. 默認值 = true
2.autoStartSlideshow: 當PhotoSwipe激活後,自動播放幻燈片. 默認值 = false
3.allowRotationOnUserZoom: 只有 iOS 支持 - 允許用戶在縮放/平移模式下 用手勢旋轉圖像. 默認值 = false
4.backButtonHideEnabled: 按返回鍵隱藏相冊幻燈片. 主要是 Android 和 Blackberry使用. 支持 BB6, Android v2.1, iOS 4 以及更新版本. 默認值 = true
5.captionAndToolbarAutoHideDelay: 標題欄和工具欄自動隱藏的延遲時間. 默認值為 = 5000(毫秒). 如果設為 0 則不會自動隱藏(tap/單擊切換顯隱)
6.captionAndToolbarFlipPosition: 標題欄和工具欄切換位置(讓 caption顯示在底部而 toolbar顯示在頂部). 默認值 = false
7.captionAndToolbarHide: 隱藏 標題欄和工具欄. 默認值 = false
8.captionAndToolbarOpacity: 標題欄和工具欄 的透明度(0-1). 默認值 = 0.8
9.captionAndToolbarShowEmptyCaptions: 即使當前圖片的標題是空,也顯示標題欄. 默認值 = true
10.cacheMode: 緩存模式,Code.PhotoSwipe.Cache.Mode.normal (默認,正常) 或者 Code.PhotoSwipe.Cache.Mode.aggressive(激進,積極). 決定 PhotoSwipe 如何管理圖片緩存 cache.
11. Aggressive 模式將會積極地地設置非 "當前，上一張,下一張"的圖片為空的類型. 對於老版本iOS 浏覽器下的大圖片內存溢出將會很有用. 大多數情況下，normal模式就可以了。
12.doubleTapSpeed: 雙擊的最大間隔. 默認值 = 300(毫秒)
13.doubleTapZoomLevel: 當用戶雙擊的時候,放大的倍數, 默認的 "zoom-in"(拉近) 級別. 默認值 = 2.5
14.enableDrag: 允許拖動上一張/下一張圖片到當前界面. 默認值 = true
15.enableKeyboard: 允許鍵盤操作(左右箭頭切換，Esc退出,Enter自動播放,空格鍵 顯/隱標題欄/退出). 默認 = true
16.enableMouseWheel: 允許鼠標滾輪操作. 默認 = true
17.fadeInSpeed: 淡入效果元素的速度(持續時間),毫秒. 默認 = 250
18.fadeOutSpeed: 淡出效果元素的速度(持續時間),毫秒. 默認 = 250
19.imageScaleMethod: 圖片縮放方法(模式). 可選值: "fit", "fitNoUpscale" 和 "zoom". 模式"fit" 保證圖像適應屏幕. "fitNoUpscale" 和 "fit"類似但是不會放大圖片. "zoom"將圖片全屏, 但有可能圖片縮放不是等比例的. 默認 = "fit"
20.invertMouseWheel: 反轉鼠標滾輪。默認情況下,鼠標向下滾動將切換到下一張,向上切換到上一張 . 默認 = false
21.jQueryMobile: 指示 PhotoSwipe 是否集成進了 jQuery Mobile 項目. 默認情況下, PhotoSwipe will try and work this out for you
22.jQueryMobileDialogHash: jQuery Mobile的window,dialog頁面 所使用的hash標簽。 默認值 = "&ui-state=dialog"
23.loop: 相冊是否自動循環. 默認 = true
24.margin: 兩張圖之間的間隔,單位是像素. 默認 = 20
25.maxUserZoom: 最大放大倍數. 默認 = 5.0 (設置為0將被忽略)
26.minUserZoom: 圖像最小的縮小倍數. 默認 = 0.5 (設置為0將會忽略)
27.mouseWheelSpeed: 響應鼠標滾輪的靈敏度. 默認 = 500(毫秒)
28.nextPreviousSlideSpeed: 當點擊上一張,下一張按鈕後,延遲多少毫秒執行切換. 默認 = 0 (立即切換)
29.preventHide: 阻止用戶關閉 PhotoSwipe. 同時也會隱藏 工具欄上的"close"關閉按鈕. 在獨享的頁面使用 (示例是源碼中的 examples/08-exclusive-mode.html). 默認 = false
30.preventSlideshow: 阻止自動播放模式. 同時也會隱藏工具欄裡的播放按鈕. 默認 = false
31.slideshowDelay: 自動播放模式下，多長時間播放下一張. Default = 3000(毫秒)
32.slideSpeed: 圖片滑進視圖的時間. 默認 = 250(毫秒)
33.swipeThreshold: 手指滑動多少像素才觸發一個 swipe 手勢事件. 默認 = 50
34.swipeTimeThreshold: 定義觸發swipe(滑動)手勢的最大毫秒數,太慢了則不會觸發滑動，只會拖動當前照片的位置. 默認 = 250
35.slideTimingFunction: 滑動時的 Easing function . 默認 = "ease-out"
36.zIndex: 初始的zIndex值. 默認 = 1000
37.enableUIWebViewRepositionTimeout: 檢查設備的方向是否改變。默認 = false
38.uiWebViewResetPositionDelay: 定時檢查設備的方向是否改變的時間 默認 = 500(毫秒)
39.preventDefaultTouchEvents: 阻止默認的touch事件，比如頁面滾動。 默認 = true
40.target: 必須是一個合法的DOM元素(如DIV)。默認是window(全頁面)。而如果是某個低級別的DOM，則在DOM內顯示，可能非全屏。
自定義函數
getToolbar: function(){
/*返回 要在Toolbar之中顯示的HTML字符串*/
},
getImageSource: function(el){
/* 告訴 gallery如何獲取圖片的src,
默認情況下,gallery假設你使用<a>標簽包裝了<img>縮略圖，而<a>標簽的href屬性即為完整圖片的URL。
此時可以使用本方法來返回對應元素的圖片的路徑。可以是各種各樣的。比如rel屬性什麼的。有jQuery那就更簡單了。
*/
return el.getAttribute('rel');
},
getImageCaption: function(el){
/**
如同 getImageSource 方法一樣，此方法返回圖片的標題，默認情況下gallery查找圖片的alt 屬性。
*/
},
getImageMetaData: function(el){
/**
如果你監聽了 onDisplayImage,那麼你可以通過此函數獲取額外的元信息.並在 onDisplayImage中使用
*/
return {
longDescription: el.getAttribute(el, 'data-long-description')
}
}
針對android 手機一次點按，會引起一層關閉後,底上的層依然會觸發點擊事件的問題，我們的解決方案如下:
// 在android 手機上多個層次觸發點擊,我們采用的是用定時器進行攔截
var event_timeout = 500;// 預防多次事件觸發
// 阻止短時間內連續事件
var multiClickPrevent = false;
function preventMultiClick(){
if(multiClickPrevent){
return false;
}
multiClickPrevent = true;
window.setTimeout(function(){
multiClickPrevent = false;
},event_timeout);
return true;
};
// 適配浏覽器
var useragent = navigator.userAgent;
var likeIOS = useragent.match(/iPad|iPhone|iPod/i);
var likeAndroid = useragent.match(/android/i);
var specialClick = "click";
if(likeIOS){
specialClick = "touchstart click";
} else if(likeAndroid){
specialClick = "touchstart click";
}
/示例
$(".t_right").live(specialClick,function(){
if(preventMultiClick()){
// 執行其他操作
} else {
// else 就是拒絕操作啦,可以直接返回 false 之類的
return false;
}
});
//示例
$("body").live(specialClick,function(){
if(preventMultiClick()){
// 執行其他操作
}
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。