手机图片预览插件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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
js实现盒子滚动动画效果
Aug 09 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
php面向对象的方法重载两种版本比较
2008/09/08 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
vue如何判断dom的class
2018/04/26 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
详解小程序横屏方案对比
2020/06/28 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
Python性能优化的20条建议
2014/10/25 Python
Python 装饰器深入理解
2017/03/16 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
python dict乱码如何解决
2020/06/07 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
养殖项目策划书范文
2014/01/13 职场文书
服务员岗位责任制
2014/02/11 职场文书
模范教师事迹材料
2014/12/16 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书