手機圖片預覽photoswipe，支持pc圖片預覽，多用於android，ios的手機圖片預覽。
資源包：photoswipe-3.0.5
在photoswipe官網有1.0.11的包下載，但是1.0.11這個版本，存在缺陷，在部分android手機上，滑動一次的時候，會跳轉2張圖片
（正常情況下，滑動一次，跳轉1張圖片）
通常使用方法如下：
在html的head標籤中依次加載資源包中如下文件：
<script type="text/javascript" src="klass.min.js"></script><script type="text/javascript" charset="utf-8" src="jquery-1.8.2.js"></script><script type="text/javascript" charset="utf-8" src="code.photoswipe-3.0.5.js"></script><script type="text/javascript" charset="utf-8" src="jquery.transit.js"></script><script type="text/javascript" charset="utf-8" src="hammer.js"></script><script type="text/javascript" charset="utf-8" src="jquery.hammer.js"></script>
html部分圖片的格式如下：
<ul id="Gallery"> <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" /></a></li> <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" /></a></li> <li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" /></a></li> <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" /></a></li> <li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" /></a></li> <li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" /></a></li> <li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" /></a></li> <li><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" /></a></li> <li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" /></a></li> <li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" /></a></li> <li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" /></a></li> <li><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" /></a></li> <li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" /></a></li> <li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" /></a></li> <li><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" /></a></li> <li><a href="images/full/016.jpg"><img src="images/thumb/016.jpg" /></a></li> <li><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" /></a></li> <li><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" /></a></li> </ul>
js部分調用該插件可以demo中提到的
(function(window, PhotoSwipe){ document.addEventListener('DOMContentLoaded', function(){ var options = {}, instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options ); }, false); }(window, window.Code.PhotoSwipe));也可以使用：$("#Gallery a").photoSwipe();
如果html部分，需要有特殊格式，則可以通過以下方式調用：
1、聲明全局變量：var photoswipe_instance = 0;
2、對於需要需要進入預覽的元素綁定點按事件，內容如下：
arr_images.push({ url: XXX});var PhotoSwipe = window.Code.PhotoSwipe;var instance = PhotoSwipe.attach(arr_images, '', photoswipe_instance);photoswipe_instance++;instance.show(show_current); 3、找到PhotoSwipe.Cache.CacheClass中initialize: function(images, options){ var i, j, cacheImage, image, src, caption, metaData; this.settings = options; this.images = []; for (i=0, j=images.length; i<j; i++){ image = images[i]; // src = this.settings.getImageSource(image);//原來的代碼---改動的地方src = image.url;//新的代碼---改動的地方caption = this.settings.getImageCaption(image); metaData = this.settings.getImageMetaData(image); this.images.push(new PhotoSwipe.Image.ImageClass(image, src, caption, metaData)); } },另外，插件原來有個地方有問題，需要做如下修改：
找到PhotoSwipe.DocumentOverlay.DocumentOverlayClass（這裡背景浮層的定位和高度原先有問題）
resetPosition: function(){ var width, height, top; if (this.settings.target === window){ width = Util.DOM.windowWidth(); // height = Util.DOM.bodyOuterHeight() * 2; // This covers extra height added by photoswipe//舊的代碼--改動之處height = Util.DOM.bodyOuterHeight(); //新的代碼--改動之處// top = (this.settings.jQueryMobile) ? Util.DOM.windowScrollTop() + 'px' : '0px';//舊的代碼--改動之處top = Util.DOM.windowScrollTop() + 'px';//新的代碼--改動之處if (height < 1){ height = this.initialBodyHeight; } if (Util.DOM.windowHeight() > height){ height = Util.DOM.windowHeight(); } } else{ width = Util.DOM.width(this.settings.target); height = Util.DOM.height(this.settings.target); top = '0px'; } Util.DOM.setStyle(this.el, { width: width, height: height, top: top }); },以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。