手机图片预览插件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 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 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
Apache服务器无法使用的解决方法
2013/05/08 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
详解Django的CSRF认证实现
2018/10/09 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
我的大学生活职业生涯规划
2014/01/02 职场文书
家长给老师的道歉信
2014/01/13 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书