【总结】手机图片预览插件photoswipe使用总结

手机图片预览photoswipe，支持pc图片预览，多用于android，ios的手机图片预览。

资源包：http://download.csdn.net/detail/snow_finland/8152787

在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" class="gallery"><li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li><li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li><li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></li><li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" /></a></li><li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" /></a></li><li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" /></a></li><li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" /></a></li><li><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" /></a></li><li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" /></a></li><li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li><li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li><li><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li><li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li><li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li><li><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li><li><a href="images/full/016.jpg"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li><li><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li><li><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li></ul>

js部分调用该插件可以demo中提到的

(function(window, PhotoSwipe){document.addEventListener('DOMContentLoaded', function(){varoptions = {},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});},