手机图片预览插件photoswipe.js使用总结
更新时间：2016年08月25日 14:11:52 作者：snow_finland
这篇文章主要为大家详细总结了手机图片预览插件photoswipe.js使用方法，感兴趣的小伙伴们可以参考一下
手机图片预览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
});
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
这篇文章主要介绍了微信小程序使用wx.request请求服务器json数据并渲染到页面操作,结合实例形式分析了微信小程序使用wx.request发送网络请求及返回结果渲染到wxml界面相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了JS实现向表格中动态添加行的方法,涉及javascript针对表格行的动态添加技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要为大家介绍了前端技巧之HTTP中POST提交数据四种方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
JavaScript中检测对象类型的运算符有：typeof、instanceof，还有对象的constructor属性： 1) typeof 运算符 typeof 是一元运算符，返回结果是一个说明运算数类型的字符串。下面由小编给大家分享JavaScript中的4种类型识别方法，需要的朋友可以参考下本文2015-09-09
本文通过实例代码给大家介绍了js实现alert的方法，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-07-07
这篇文章主要为大家介绍了JavaScript设计模式中的模板方法模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了JS基于正则表达式的替换操作(replace)用法,结合具体实例形式详细分析了replace函数的语法、参数及具体使用技巧,需要的朋友可以参考下2017-04-04
在JavaScript中数组也是比较常用的对象之一，数组是值的有序集合，本篇文章给大家分享Javascript中Array()数组函数详解，需要的朋友可以参考下2015-08-08
得到当前行的值的javascript代码...2007-06-06
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
这篇文章主要介绍了JavaScript学习小结之被嫌弃的eval和with实例详解的相关资料,需要的朋友可以参考下2016-08-08
最新评论