手机预览插件photoswipe.js使用总结
资源包:photoswipe-3.0.5
在photoswipe官方网站,有1.0.11下载,但1.0.11版本是有缺陷的。当它在一些Android手机上滑动时,它会跳2张图片。
(通常,幻灯片一次,跳转1幅图片)
常用的方法如下:
在HTML的头标记中,在资源包中依次加载下列文件:
部分HTML图片的格式如下所示:
js部分调用演示中提到的插件。
(功能(窗口,photoswipe){
Document.addEventListener('domcontentloaded,函数(){(){
VaR
选项{ },
实例= photoswipe.attach(window.document.queryselectorall(' #画廊'),选项);
},假);
}(窗口,窗口的代码。photoswipe));
它也可以用:$(#画廊)的PhotoSwipe();
如果HTML部分需要具有特殊格式,可以通过以下方式调用它:
1,声明全局变量:变量photoswipe_instance = 0;
2,对于需要进入预览的元素绑定点,内容如下:
arr_images.push({
网址:XXX
});
无功photoswipe = window.code.photoswipe;
var实例= photoswipe.attach(arr_images,' ',photoswipe_instance);
photoswipe_instance + +;
instance.show(show_current);
三.找到photoswipe.cache.cacheclass
初始化:函数(图像,选项){
var i,j,cacheimage、图像、SRC、标题、元数据;
this.settings =选项;
this.images = { };
为(i = 0,J = images.length;i < j;i++){
图像=图像{ };
/ / src= this.settings.getimagesource(图像); / /原代码,改变的地方
SRC = image.url; / /新代码改变的地方
标题= this.settings.getimagecaption(图像);
元数据= this.settings.getimagemetadata(图像);
This.images.push(新photoswipe.image.imageclass(图像、SRC、标题、元数据));
}
},
此外,还有一个插件存在问题的地方,我们需要进行以下修改:
Find PhotoSwipe.DocumentOverlay.DocumentOverlayClass(背景中的位置和高度,在这里有以前的问题)
resetposition:函数(){
宽度,高度,顶部;
如果(this.settings.target =窗口){
宽度= util.dom.windowwidth();
/ /身高= Util.DOM.bodyOuterHeight(* 2); / /这套额外的高度增加photoswipe / /旧的代码更改
高度=(util。DOM。bodyouterheight); / /新的代码更改
/ /顶=(这个设置。jquerymobile)util.dom.windowscrolltop(+)'px:'0px '; / /旧的代码更改
=(util.dom.windowscrolltop + 'px '); / /新的代码更改
如果(高度< 1){
高度= this.initialbodyheight;
}
如果(Util.DOM.windowHeight)>(高度){
高度= Util.DOM.windowHeight();
}
}
别的{
宽度= util.dom.width(这个设置。目标);
高度= Util.DOM.height(这个设置。目标);
最高'0px;
}
util.dom.setstyle(this.el,{
宽度:宽度,
身高:身高,
顶:顶
});
},
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。