当前位置:首页 > 日记 > 正文

手机预览插件photoswipe.js使用总结

手机预览插件photoswipe.js使用总结
移动图片预览photoswipe PC,支持图片预览,更多的Android、iOS手机图片预览。

资源包: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,{
宽度:宽度,
身高:身高,
顶:顶
});

},
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。

相关文章

如何卸载WPS表WPS教程

如何卸载WPS表WPS教程

教程,卸载,电脑软件,WPS,有时我们想卸载WPS并重新安装它,但是我们不知道如何卸载它。我们现在该怎么办让我们告诉你如何卸载WPS。 卸载WPS的方法 点击屏幕左下角的开始菜单。 点开控制面 点开程序和函数 查找WPS程序 软件中的右键-卸载 点…

MySQL修改密码后解决phpmyadmin

MySQL修改密码后解决phpmyadmin

修改密码,电脑软件,MySQL,phpmyadmin,安装WAMP集成服务器和配置后,单击phpMyAdmin进入MySQL数据库的在线用户,但是当你修改mysql管理员root用户的密码,点击下一页。 错误的原因:这是因为phpmyadmin配置文件没有同步更新后的MySQL密码被修改 …

在哪里使用WPS演示教程的WPS格式

在哪里使用WPS演示教程的WPS格式

教程,演示,格式,电脑软件,WPS,在普通的文本编辑过程中,如何快速地把两段相同的格式、格式的画笔给大家解决这个问题。其实使用的方法并不难,下面的小编就如何教你如何在WPS文本中使用格式画笔,欢迎大家学习。 在WPS文本中使用格式化画笔 打…

解决与虚拟机连接Oracle的ora-1215

解决与虚拟机连接Oracle的ora-1215

连接,虚拟机,电脑软件,Oracle,ora,谈论ora-12154问题,互联网上有很多的解决方案。原因是基本统一:TNS听者或配置不正确。对于监听器配置一般是不正确的,大多数人遵循的默认配置的所有方式,其次是Oracle服务名。如果本地连接可以连接到Oracle,其…

用ps滤波器制作亚麻背景图

用ps滤波器制作亚麻背景图

背景图,滤波器,亚麻,电脑软件,ps,今天给大家分享一下PS过滤生产亚麻底图的方法,教程很不错,值得学习,好吧,让我们看看吧。 步 点击文件-新命令(Ctrl + N)创建一个新的空白图像的RGB模式的1920 * 1080。(大小使用图片) 设置前景色为c8aa64参数,和背…

快速制作名称代码表

快速制作名称代码表

代码表,名称,快速,电脑软件,近年来,高考以及各种职称和资格考试报名工作开始在全国,将转换成汉字需要用汉字编码字符集基本集4位数GB 2312-80 的时间填写报名信息卡的信息交换,如果检查手册速度必然会慢,所以,如何快速做一个编码表,包含了所有学…

控件控件长度的文本控件

控件控件长度的文本控件

控件,文本,长度,电脑软件,在web项目的开发过程中,有时会出现一个问题,即控件被文本内容所破坏,但是如何控制控件文本的内容呢也许有人会对显示控制文本控件使用Javascript的子串,但由于字母、汉字语言的每个字符,其他大小不一,导致相同的子串(0, 10),一些…

windows10安装mysql5.7.17教程

windows10安装mysql5.7.17教程

教程,安装,电脑软件,本教程为您分享给你参考的mysql5.7.17安装配置方法,具体如下 手术全证 精彩的主题分享:MySQL版本安装教程mysql5.7版安装教程 以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。…

PS在暴风雨前制造乌云。

PS在暴风雨前制造乌云。

乌云,雨前,暴风,电脑软件,PS,萧边今天要与你分享关于之前的风暴使PS云图的方式。这个教程还不是很好。这个介绍也很详细,希望能帮助PS设计爱好者。 步 要找到原始地图和材料图 打开原图片和材质贴图,拖拽云素材图片到原始图片,并创建一个遮…

MySQL5.7.17压缩版安装注意事项

MySQL5.7.17压缩版安装注意事项

安装,压缩版,注意事项,电脑软件,本例为您分享供大家参考的安装步骤mysql5.7.17压缩版,以下具体内容 1。下载的压缩包解压到相应的目录 2。将MySQL的bin目录路径添加到PATH环境变量中 三.修改配置文件my-default.ini,这将 # ..basedir =… # …

结合多个对象和方法上的旗帜和JQ(必

结合多个对象和方法上的旗帜和JQ(必

对象,方法,多个,电脑软件,JQ,为什么是$(这)在功能的jQuery不等于$(e.target) 在html中有一个按钮: 我的按钮 $(# mybtn)。Click(function(e){ console.log($(this)); console.log($(e.target)); console.log($(this)= = $(e.target)); }); / /美元(这)和$(e.target) 在控制…

PS图象处理软件中国fufuwa动画奥运

PS图象处理软件中国fufuwa动画奥运

动画,中国,图象,处理软件,奥运,相关文章:PS图象处理软件轻松画出第七夜的浪漫的GIF动画 2008年8月8日,第二十九届奥运会将在北京举行。在这个国庆节即将到来,萧边特意邀请了我姐姐的主持人,想念辣妹妹,创造奥运中国动画,为奥运喝彩,为中国加油。 …