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


Posted in Javascript onAugust 25, 2016

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

资源包:photoswipe-3.0.5

在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(){ 
 var
 options = {},
 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
 });
 
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 #Javascript
jQuery组件easyui对话框实现代码
Aug 25 #Javascript
jQuery组件easyui基本布局实现代码
Aug 25 #Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 #Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 #Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 #Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 #Javascript
You might like
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python中List.index()方法的使用教程
2015/05/20 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
基于python3实现倒叙字符串
2020/02/18 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android