手机图片预览插件photoswipe.js使用总结
手机图片预览photoswipe，支持pc图片预览，多用于android，ios的手机图片预览。
资源包：photoswipe-3.0.5
在photoswipe官网有1.0.11的包下载，但是1.0.11这个版本，存在缺陷，在部分android手机上，滑动一次的时候，会跳转2张图片
（正常情况下，滑动一次，跳转1张图片）
通常使用方法如下：
在html的head标签中依次加载资源包中如下文件：
<scripttype="text/javascript"src="klass.min.js"></script> <scripttype="text/javascript"charset="utf-8"src="jquery-1.8.2.js"></script> <scripttype="text/javascript"charset="utf-8"src="code.photoswipe-3.0.5.js"></script> <scripttype="text/javascript"charset="utf-8"src="jquery.transit.js"></script> <scripttype="text/javascript"charset="utf-8"src="hammer.js"></script> <scripttype="text/javascript"charset="utf-8"src="jquery.hammer.js"></script>
html部分图片的格式如下：
<ulid="Gallery"class="gallery"> <li><ahref="images/full/001.jpg"><imgsrc="images/thumb/001.jpg"alt="Image001"/></a></li> <li><ahref="images/full/002.jpg"><imgsrc="images/thumb/002.jpg"alt="Image002"/></a></li> <li><ahref="images/full/003.jpg"><imgsrc="images/thumb/003.jpg"alt="Image003"/></a></li> <li><ahref="images/full/004.jpg"><imgsrc="images/thumb/004.jpg"alt="Image004"/></a></li> <li><ahref="images/full/005.jpg"><imgsrc="images/thumb/005.jpg"alt="Image005"/></a></li> <li><ahref="images/full/006.jpg"><imgsrc="images/thumb/006.jpg"alt="Image006"/></a></li> <li><ahref="images/full/007.jpg"><imgsrc="images/thumb/007.jpg"alt="Image007"/></a></li> <li><ahref="images/full/008.jpg"><imgsrc="images/thumb/008.jpg"alt="Image008"/></a></li> <li><ahref="images/full/009.jpg"><imgsrc="images/thumb/009.jpg"alt="Image009"/></a></li> <li><ahref="images/full/010.jpg"><imgsrc="images/thumb/010.jpg"alt="Image010"/></a></li> <li><ahref="images/full/011.jpg"><imgsrc="images/thumb/011.jpg"alt="Image011"/></a></li> <li><ahref="images/full/012.jpg"><imgsrc="images/thumb/012.jpg"alt="Image012"/></a></li> <li><ahref="images/full/013.jpg"><imgsrc="images/thumb/013.jpg"alt="Image013"/></a></li> <li><ahref="images/full/014.jpg"><imgsrc="images/thumb/014.jpg"alt="Image014"/></a></li> <li><ahref="images/full/015.jpg"><imgsrc="images/thumb/015.jpg"alt="Image015"/></a></li> <li><ahref="images/full/016.jpg"><imgsrc="images/thumb/016.jpg"alt="Image016"/></a></li> <li><ahref="images/full/017.jpg"><imgsrc="images/thumb/017.jpg"alt="Image017"/></a></li> <li><ahref="images/full/018.jpg"><imgsrc="images/thumb/018.jpg"alt="Image018"/></a></li> </ul>
js部分调用该插件可以demo中提到的
(function(window,PhotoSwipe){
document.addEventListener('DOMContentLoaded',function(){
var
options={},
instance=PhotoSwipe.attach(window.document.querySelectorAll('#Gallerya'),options);
},false);
}(window,window.Code.PhotoSwipe));
也可以使用： $("#Gallerya").photoSwipe();
如果html部分，需要有特殊格式，则可以通过以下方式调用：
1、声明全局变量： varphotoswipe_instance=0;
2、对于需要需要进入预览的元素绑定点按事件，内容如下：
arr_images.push({
url:XXX
});
varPhotoSwipe=window.Code.PhotoSwipe;
varinstance=PhotoSwipe.attach(arr_images,'',photoswipe_instance);
photoswipe_instance++;
instance.show(show_current);
3、找到PhotoSwipe.Cache.CacheClass中
initialize:function(images,options){
vari,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(newPhotoSwipe.Image.ImageClass(image,src,caption,metaData));
}
},
另外，插件原来有个地方有问题，需要做如下修改：
找到PhotoSwipe.DocumentOverlay.DocumentOverlayClass（这里背景浮层的定位和高度原先有问题）
resetPosition:function(){
varwidth,height,top;
if(this.settings.target===window){
width=Util.DOM.windowWidth();
//height=Util.DOM.bodyOuterHeight()*2;//Thiscoversextraheightaddedbyphotoswipe//旧的代码--改动之处
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
});
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。