本文总结photoswipe.js插件在移动端及PC端的图片预览应用。针对1.0.11版本在部分Android手机上滑动一次跳转两张图的缺陷，推荐使用3.0.5版本。文章提供了标准的HTML/JS调用方式，并详细说明了通过自定义数组调用及修复背景浮层高度定位问题的具体代码修改方法。
photoswipe插件简介与版本选择
photoswipe是一款支持PC端和移动端的图片预览插件，广泛应用于Android和iOS设备的图片浏览场景。
本文使用的资源包版本为photoswipe-3.0.5。
虽然官网提供1.0.11版本的下载，但该版本存在已知缺陷：在部分Android设备上，用户滑动屏幕一次时，图片会错误地跳转两张，而正常逻辑应仅跳转一张。
标准调用方法与HTML结构
通常的使用流程如下：
需要在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(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
或者使用更简洁的jQuery调用方式：$("#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
});
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。