手机图片预览插件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中的property和attribute介绍
Dec 26 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
clipboard在vue中的使用的方法示例
Oct 19 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
Vue实现搜索结果高亮显示关键字
May 28 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之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
常用PHP封装分页工具类
2017/01/14 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
javascript 闭包疑问
2010/12/30 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
python中实现k-means聚类算法详解
2017/11/11 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
Python列表解析操作实例总结
2020/02/26 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
网吧消防安全制度
2014/01/28 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
大学生实习介绍信
2015/05/05 职场文书
2015年语文教师工作总结
2015/05/25 职场文书