【总结】手机图片预览插件photoswipe使用总结 分类: photoswipe 图片预览 photoswipe3.0.5 2014-11-13 14:03 352人阅读 评论(0) 收藏
2014-11-13 14:03
761 查看
手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览。
资源包:http://download.csdn.net/detail/snow_finland/8152787
在photoswipe官网有1.0.11的包下载,但是1.0.11这个版本,存在缺陷,在部分android手机上,滑动一次的时候,会跳转2张图片
(正常情况下,滑动一次,跳转1张图片)
通常使用方法如下:
在html的head标签中依次加载资源包中如下文件:
html部分图片的格式如下:
js部分调用该插件可以demo中提到的
也可以使用:
如果html部分,需要有特殊格式,则可以通过以下方式调用:
1、声明全局变量:
var photoswipe_instance = 0;
2、对于需要需要进入预览的元素绑定点按事件,内容如下:
3、找到PhotoSwipe.Cache.CacheClass中
另外,插件原来有个地方有问题,需要做如下修改:
找到PhotoSwipe.DocumentOverlay.DocumentOverlayClass(这里背景浮层的定位和高度原先有问题)
资源包:http://download.csdn.net/detail/snow_finland/8152787
在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 }); },
相关文章推荐
- 【总结】【图片预览】手机预览图片插件iSlider使用总结 分类: 图片预览 手机图片预览插件 iSlider 2015-06-02 14:08 28人阅读 评论(0) 收藏
- 【总结】手机图片预览插件photoswipe使用总结
- 手机图片预览插件photoswipe.js使用总结
- 【图片压缩】使用canvas,html5进行图片压缩 分类: canvas 图片压缩 压缩 HTML5 fileReader 2015-03-20 17:14 118人阅读 评论(0) 收藏
- 使用iScroll和photoswipe写手机浏览图片的插件的几点经验
- 使用iScroll和photoswipe写手机浏览图片的插件的几点经验
- 【视频播放】Jplayer视频播放器的使用 分类: Jplayer 视频播放 视频插件 video 视频 视频流 2015-05-12 18:04 220人阅读 评论(0) 收藏
- 利用 HTML 5 的多图片上传及预览(不含前端的文件分割) 分类: HTML5 文件上传 上传图片的预览 XMLHTTPRequest对象 2014-01-13 11:05 419人阅读 评论(0) 收藏
- if ...__name__使用技巧总结 分类: python基础学习 python Module python 2013-11-01 14:51 262人阅读 评论(0) 收藏
- 【总结】【图片预览】手机预览图片插件iSlider使用总结
- iOS开发UITableView基本使用方法总结 分类: ios技术 2015-04-03 17:51 68人阅读 评论(0) 收藏
- Cocos2d使用TexturePacker工具打包生成plist和pvr.ccz文件方法总结 分类: cocos2d其他 2015-07-11 09:06 13人阅读 评论(0) 收藏
- 使用set()求出列表交集 分类: python基础学习 2013-06-16 17:00 241人阅读 评论(0) 收藏
- U-boot-1.1.4中关于hello_world.srec出错 分类: DSP arm-linux-Ubuntu 2013-07-22 16:29 352人阅读 评论(0) 收藏
- 使用glob模块,遍历E盘下的mp3文件 分类: python 小练习 2013-05-15 15:40 405人阅读 评论(0) 收藏
- ubuntu中安装man手册查看函数原型 分类: linux使用 2010-02-28 22:50 2453人阅读 评论(0) 收藏 举报 ubuntu语言linuxlibrarysocketsys
- 使用StringIO 分类: python 小练习 2013-06-14 16:00 233人阅读 评论(0) 收藏
- jquery form 插件 分类: JavaScript 2013-01-21 13:59 1779人阅读 评论(0) 收藏
- lambda表达式使用方法详解 分类: python 2013-03-15 10:58 396人阅读 评论(0) 收藏
- c语言中<stdbool.h>的使用 分类: H_HISTORY 2013-02-03 21:46 1416人阅读 评论(0) 收藏