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" /></a></li>
<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" /></a></li>
<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" /></a></li>
<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" /></a></li>
<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" /></a></li>
<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" /></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()){ // 執行其他操作} });以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。