官方介紹
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>
參數說明

allowUserZoom: 允許用戶雙擊放大/移動方式查看圖片. 默認值 = true autoStartSlideshow: 當PhotoSwipe激活后,自動播放幻燈片. 默認值 = false allowRotationOnUserZoom: 只有 iOS 支持 - 允許用戶在縮放/平移模式下 用手勢旋轉圖像. 默認值 = false backButtonHideEnabled: 按返回鍵隱藏相冊幻燈片. 主要是 Android 和 Blackberry使用. 支持 BB6, Android v2.1, iOS 4 以及更新版本. 默認值 = true captionAndToolbarAutoHideDelay: 標題欄和工具欄自動隱藏的延遲時間. 默認值為 = 5000(毫秒). 如果設為 0 則不會自動隱藏(tap/單擊切換顯隱) captionAndToolbarFlipPosition: 標題欄和工具欄切換位置(讓 caption顯示在底部而 toolbar顯示在頂部). 默認值 = false captionAndToolbarHide: 隱藏 標題欄和工具欄. 默認值 = false captionAndToolbarOpacity: 標題欄和工具欄 的透明度(0-1). 默認值 = 0.8 captionAndToolbarShowEmptyCaptions: 即使當前圖片的標題是空,也顯示標題欄. 默認值 = true cacheMode: 緩存模式,Code.PhotoSwipe.Cache.Mode.normal (默認,正常) 或者 Code.PhotoSwipe.Cache.Mode.aggressive(激進,積極). 決定 PhotoSwipe 如何管理圖片緩存 cache.Aggressive 模式將會積極地地設置非 "當前，上一張,下一張"的圖片為空的類型. 對于老版本iOS 瀏覽器下的大圖片內存溢出將會很有用. 大多數情況下，normal模式就可以了。 doubleTapSpeed: 雙擊的最大間隔. 默認值 = 300(毫秒) doubleTapZoomLevel: 當用戶雙擊的時候,放大的倍數, 默認的 "zoom-in"(拉近) 級別. 默認值 = 2.5 enableDrag: 允許拖動上一張/下一張圖片到當前界面. 默認值 = true enableKeyboard: 允許鍵盤操作(左右箭頭切換，Esc退出,Enter自動播放,空格鍵 顯/隱標題欄/退出). 默認 = true enableMouseWheel: 允許鼠標滾輪操作. 默認 = true fadeInSpeed: 淡入效果元素的速度(持續時間),毫秒. 默認 = 250 fadeOutSpeed: 淡出效果元素的速度(持續時間),毫秒. 默認 = 250 imageScaleMethod: 圖片縮放方法(模式). 可選值: "fit", "fitNoUpscale" 和 "zoom". 模式"fit" 保證圖像適應屏幕. "fitNoUpscale" 和 "fit"類似但是不會放大圖片. "zoom"將圖片全屏, 但有可能圖片縮放不是等比例的. 默認 = "fit" invertMouseWheel: 反轉鼠標滾輪。默認情況下,鼠標向下滾動將切換到下一張,向上切換到上一張 . 默認 = false jQueryMobile: 指示 PhotoSwipe 是否集成進了 jQuery Mobile 項目. 默認情況下, PhotoSwipe will try and work this out for you jQueryMobileDialogHash: jQuery Mobile的window,dialog頁面 所使用的hash標簽。 默認值 = "&ui-state=dialog" loop: 相冊是否自動循環. 默認 = true margin: 兩張圖之間的間隔,單位是像素. 默認 = 20 maxUserZoom: 最大放大倍數. 默認 = 5.0 (設置為0將被忽略) minUserZoom: 圖像最小的縮小倍數. 默認 = 0.5 (設置為0將會忽略) mouseWheelSpeed: 響應鼠標滾輪的靈敏度. 默認 = 500(毫秒) nextPreviousSlideSpeed: 當點擊上一張,下一張按鈕后,延遲多少毫秒執行切換. 默認 = 0 (立即切換) preventHide: 阻止用戶關閉 PhotoSwipe. 同時也會隱藏 工具欄上的"close"關閉按鈕. 在獨享的頁面使用 (示例是源碼中的 examples/08-exclusive-mode.html). 默認 = false preventSlideshow: 阻止自動播放模式. 同時也會隱藏工具欄里的播放按鈕. 默認 = false slideshowDelay: 自動播放模式下，多長時間播放下一張. Default = 3000(毫秒) slideSpeed: 圖片滑進視圖的時間. 默認 = 250(毫秒) swipeThreshold: 手指滑動多少像素才觸發一個 swipe 手勢事件. 默認 = 50 swipeTimeThreshold: 定義觸發swipe(滑動)手勢的最大毫秒數,太慢了則不會觸發滑動，只會拖動當前照片的位置. 默認 = 250 slideTimingFunction: 滑動時的 Easing function . 默認 = "ease-out" zIndex: 初始的zIndex值. 默認 = 1000 enableUIWebViewRepositionTimeout: 檢查設備的方向是否改變。默認 = false uiWebViewResetPositionDelay: 定時檢查設備的方向是否改變的時間 默認 = 500(毫秒) preventDefaultTouchEvents: 阻止默認的touch事件，比如頁面滾動。 默認 = true 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()){// 執行其他操作} });

轉載于:https://www.cnblogs.com/lanzhi/p/6467102.html

總結

以上是生活随笔為你收集整理的PhotoSwipe简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。