手机图片预览插件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 相关文章推荐
popdiv
Jul 14 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
Vue Element校验validate的实例
Sep 21 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
mysql 全文搜索 技巧
2007/04/27 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
python实现360的字符显示界面
2014/02/21 Python
python为tornado添加recaptcha验证码功能
2014/02/26 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
UML设计模式笔试题
2014/06/07 面试题
物理系毕业生自荐信
2013/11/01 职场文书
幼儿教师求职信
2014/05/24 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
2015年司机工作总结
2015/04/23 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python