首页 > 其他分享 >手机上图片预览插件 PhotoSwipe简介

手机上图片预览插件 PhotoSwipe简介

时间:2023-05-16 10:03:48浏览次数:48  
标签:function 插件 false 预览 PhotoSwipe 默认 默认值 true


官方介绍
PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。

为谁而用
让移动站点的相册体验和原生App一样的设计师和开发者。

绝佳特性
PhotoSwipe提供给用户一个熟悉又直观的相册交互界面。

官方网站
http://www.photoswipe.com/
源码示例
http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-3.0.5.zip

Github
https://github.com/codecomputerlove/PhotoSwipe

在线demo
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html

兼容特性
PhotoSwipe兼容大量的移动设备以及所有流行的JavaScript类库/开发框架. 既有基于jQuery的版本,也有不依赖jQuery的版本,还有兼容jQuery Mobile的版本。当然,All In One,全在源码示例包里。

如何使用
PhotoSwipe是一个自身独立的JavaScript库,可以很方便地集成进你的网站。针对移动浏览器(webkit)进行了大量的优化,当然,对于桌面浏览器,以及jQueryMobile,在源码包内也提供了相应的版本.

类库引用

 




1. <!-- photoswipe 之前先引用klass,如果需要提高加载速度,可以给 script 加上 defer 标记/属性-->  
2. <script type="text/javascript" src="klass.min.js"></script>  
3. <!-- 重要提示,如果不使用jQuery版本,在IE下面会出错,当然,使用jQuery版本,则需要引入jQuery-->  
4. <script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>


调用代码




1. /* 添加DOMContentLoaded 事件监听,类似于jQuery的 ready函数.
2.  默认方式 examples/01-default.html
3.  无缩略图模式请查看.examples/09-exclusive-mode-no-thumbnails.html
4. */  
5. // PhotoSwipe.attach 方法接收3个参数(HTML元素集合,可选配置信息,可选多实例时string类型的ID)  
6. document.addEventListener('DOMContentLoaded', function(){  
7. //设置 PhotoSwipe绑定为 id为Gallery的容器下的所有<a>标签.点击就会激活  
8. // 此处的对象,就是PhotoSwipe实例,可以使用相应的方法,例如 show(0),hide()等.  
9. var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );  
10. }, false);



如果使用jQuery,则调用代码如下:


 

1. //jQuery 版,对应的js文件也需要变化  
2. // 示例详见examples/02-jquery.html  
3. $(document).ready(function(){  
4. // 此处的对象,就是PhotoSwipe实例,可以使用相应的方法,例如 show(0),hide()等.  
5. var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });  
6. });



HTML代码



1. <!-- ul li 之类是用于显示缩略图的,也可以根据需要调整.<a>下面的<img> 元素,即为缩略图,如果不需要,则src设置为空即可 -->  
2. <ul id="Gallery">  
3. <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>  
4. <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>  
5. <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>  
6. <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>  
7. <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>  
8. <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>  
9. </ul>


参数说明

 

 


1. allowUserZoom: 允许用户双击放大/移动方式查看图片. 默认值 = true  
2. autoStartSlideshow: 当PhotoSwipe激活后,自动播放幻灯片. 默认值 = false  
3. allowRotationOnUserZoom: 只有 iOS 支持 - 允许用户在缩放/平移模式下 用手势旋转图像. 默认值  = false  
4. backButtonHideEnabled: 按返回键隐藏相册幻灯片. 主要是 Android 和 Blackberry使用. 支持 BB6, Android v2.1, iOS 4 以及更新版本. 默认值 = true  
5. captionAndToolbarAutoHideDelay: 标题栏和工具栏自动隐藏的延迟时间. 默认值为 = 5000(毫秒). 如果设为 0 则不会自动隐藏(tap/单击切换显隐)  
6. captionAndToolbarFlipPosition: 标题栏和工具栏切换位置(让 caption显示在底部而 toolbar显示在顶部). 默认值 = false  
7. captionAndToolbarHide: 隐藏 标题栏和工具栏. 默认值  = false  
8. captionAndToolbarOpacity: 标题栏和工具栏 的透明度(0-1). 默认值  = 0.8  
9. captionAndToolbarShowEmptyCaptions: 即使当前图片的标题是空,也显示标题栏. 默认值 = true  
10. cacheMode: 缓存模式,Code.PhotoSwipe.Cache.Mode.normal (默认,正常) 或者 Code.PhotoSwipe.Cache.Mode.aggressive(激进,积极). 决定 PhotoSwipe 如何管理图片缓存 cache.  
11. "当前,上一张,下一张"的图片为空的类型. 对于老版本iOS 浏览器下的大图片内存溢出将会很有用. 大多数情况下,normal模式就可以了。  
12. doubleTapSpeed: 双击的最大间隔. 默认值 = 300(毫秒)  
13. doubleTapZoomLevel: 当用户双击的时候,放大的倍数, 默认的 "zoom-in"(拉近) 级别. 默认值 = 2.5  
14. enableDrag: 允许拖动上一张/下一张图片到当前界面. 默认值 = true  
15. enableKeyboard: 允许键盘操作(左右箭头切换,Esc退出,Enter自动播放,空格键 显/隐标题栏/退出). 默认 = true  
16. enableMouseWheel: 允许鼠标滚轮操作. 默认 = true  
17. fadeInSpeed: 淡入效果元素的速度(持续时间),毫秒. 默认 = 250  
18. fadeOutSpeed: 淡出效果元素的速度(持续时间),毫秒. 默认 = 250  
19. imageScaleMethod: 图片缩放方法(模式). 可选值: "fit", "fitNoUpscale" 和 "zoom". 模式"fit" 保证图像适应屏幕. "fitNoUpscale" 和 "fit"类似但是不会放大图片. "zoom"将图片全屏, 但有可能图片缩放不是等比例的. 默认 = "fit"  
20. invertMouseWheel: 反转鼠标滚轮。默认情况下,鼠标向下滚动将切换到下一张,向上切换到上一张 . 默认 = false  
21. jQueryMobile: 指示 PhotoSwipe 是否集成进了 jQuery Mobile 项目. 默认情况下, PhotoSwipe will try and work this out for you  
22. jQueryMobileDialogHash: jQuery Mobile的window,dialog页面 所使用的hash标签。 默认值 = "&ui-state=dialog"  
23. loop: 相册是否自动循环. 默认 = true  
24. margin: 两张图之间的间隔,单位是像素. 默认 = 20  
25. maxUserZoom: 最大放大倍数. 默认 = 5.0 (设置为0将被忽略)  
26. minUserZoom: 图像最小的缩小倍数. 默认 = 0.5 (设置为0将会忽略)  
27. mouseWheelSpeed: 响应鼠标滚轮的灵敏度. 默认 = 500(毫秒)  
28. nextPreviousSlideSpeed: 当点击上一张,下一张按钮后,延迟多少毫秒执行切换. 默认 = 0 (立即切换)  
29. preventHide: 阻止用户关闭 PhotoSwipe. 同时也会隐藏 工具栏上的"close"关闭按钮. 在独享的页面使用 (示例是源码中的 examples/08-exclusive-mode.html). 默认 = false  
30. preventSlideshow: 阻止自动播放模式. 同时也会隐藏工具栏里的播放按钮. 默认 = false  
31. slideshowDelay: 自动播放模式下,多长时间播放下一张. Default = 3000(毫秒)  
32. slideSpeed: 图片滑进视图的时间. 默认 = 250(毫秒)  
33. swipeThreshold: 手指滑动多少像素才触发一个  swipe 手势事件. 默认 = 50  
34. swipeTimeThreshold: 定义触发swipe(滑动)手势的最大毫秒数,太慢了则不会触发滑动,只会拖动当前照片的位置. 默认 = 250  
35. slideTimingFunction: 滑动时的 Easing function . 默认 = "ease-out"  
36. zIndex: 初始的zIndex值. 默认 = 1000  
37. enableUIWebViewRepositionTimeout: 检查设备的方向是否改变。默认 = false  
38. uiWebViewResetPositionDelay: 定时检查设备的方向是否改变的时间 默认 = 500(毫秒)  
39. preventDefaultTouchEvents: 阻止默认的touch事件,比如页面滚动。 默认 = true  
40. target: 必须是一个合法的DOM元素(如DIV)。默认是window(全页面)。而如果是某个低级别的DOM,则在DOM内显示,可能非全屏。



自定义函数

 

 



1. getToolbar: function(){  
2. /*返回 要在Toolbar之中显示的HTML字符串*/  
3. },  
4. getImageSource: function(el){  
5. /* 告诉 gallery如何获取图片的src,
6.      默认情况下,gallery假设你使用<a>标签包装了<img>缩略图,而<a>标签的href属性即为完整图片的URL。
7.      此时可以使用本方法来返回对应元素的图片的路径。可以是各种各样的。比如rel属性什么的。有jQuery那就更简单了。
8.     */  
9. return el.getAttribute('rel');   
10. },  
11. getImageCaption: function(el){  
12. /**
13.     如同 getImageSource 方法一样,此方法返回图片的标题,默认情况下gallery查找图片的alt 属性。
14.     */  
15. },  
16. getImageMetaData: function(el){  
17. /**
18.     如果你监听了 onDisplayImage,那么你可以通过此函数获取额外的元信息.并在 onDisplayImage中使用
19.     */  
20. return {  
21. 'data-long-description')  
22.     }  
23. }


 

 

针对android 手机一次点按,会引起一层关闭后,底上的层依然会触发点击事件的问题,我们的解决方案如下:

 



1. // 在android 手机上多个层次触发点击,我们采用的是用定时器进行拦截  
2.   
3. var event_timeout = 500;// 预防多次事件触发   
4. // 阻止短时间内连续事件  
5. var multiClickPrevent = false;  
6. function preventMultiClick(){  
7. if(multiClickPrevent){  
8. return false;  
9.     }  
10. true;  
11. function(){  
12. false;  
13.     },event_timeout);  
14. return true;  
15. };  
16.   
17. // 适配浏览器  
18. var useragent = navigator.userAgent;  
19. var likeIOS = useragent.match(/iPad|iPhone|iPod/i);  
20. var likeAndroid = useragent.match(/android/i);  
21. var specialClick = "click";  
22. if(likeIOS){  
23. "touchstart click";  
24. } else if(likeAndroid){  
25. "touchstart click";  
26. }  
27.   
28. / 示例  
29. $(".t_right").live(specialClick,function(){  
30. if(preventMultiClick()){   
31. // 执行其他操作  
32. else {  
33. // else 就是拒绝操作啦,可以直接返回 false 之类的  
34. return false;  
35.     }  
36. });  
37. // 示例  
38. $("body").live(specialClick,function(){  
39. if(preventMultiClick()){  
40. // 执行其他操作  
41.     }  
42. });

标签:function,插件,false,预览,PhotoSwipe,默认,默认值,true
From: https://blog.51cto.com/u_16112859/6282441

相关文章

  • Vue.js(九) 第三方常用插件
    1.Vue.jsdevtools用于开发调试Vue.js的一个必备插件。可以在Chrome中的扩展程序中直接安装,也可以本地文件的方式安装。2.nprogress页面顶部进度条当路由切换事会在浏览器的顶部出现一个蓝色进度条用于表示路由切换的进度,并在又上角有个蓝色loading的动画。一般情况下切换到目标......
  • pg_enterprise_views偶然发现的PG神仙插件!
    一直从事数据库相关的工作,对于PG而言最大的问题其实是在运维管理方面,其缺乏有效且直观成体系的系统表,苦觅良久,今日在PG官网中发现了一款新收录的免费插件,其提供了数十张系统表,内容涵盖了从操作系统到数据库的负载指标、等待事件、会话、客户端、SQL、SQL执行计划、超时锁、长......
  • eclipse插件WindowBuilder安装方式
    用在线安装,先启动eclipse,点菜单栏里帮助,再点里面的INSTALLNEWSOFTWARE,http://code.google.com/intl/zh-CN/javadevtools/download-wbpro.html 这网址里有3个版本,看你的是什么版本,直接把网址复制到WORKWITH里面去,等一下在下面的框里就会出现WINDOWBUILDER,全选,然后下一步···......
  • unbuntu 火狐安装flash插件 Install Adobe Flash Player In Ubuntu 13.10,13.04,12.10
    InstallAdobeFlashPlayer PressCtrl+Alt+TforopenTerminalandtrythefollowingcommands;sudoadd-apt-repository"debhttp://archive.canonical.com/$(lsb_release-sc)partner"sudoapt-getupdate&&sudoapt-getinstallflashplugin......
  • 服务器环境(插件)搭建
    PHP开发工具:neteasecloudmusic,phpstorm,postman,rdm,navicatformysql,iterm,googlechrome,dingtalk,wechat,youdao正式和测试区别开有:域名,数据库,代码仓库分支(正式master,测试dev,开发app).app-->合并->owen(自己)-->合并->app-->合并->devapp-->合并->master主流环境(插件):最笨......
  • AList – 聚合阿里云盘、百度网盘、PikPak、WebDav 等 18 款网盘:文件预览、上传/下载,
     Alist是什么?AList–聚合阿里云盘、百度网盘、PikPak、WebDav等18款网盘:文件预览、上传/下载,直接播放视频他的最大用途就是直接播放网盘视频,并且是通过你喜欢的播放器:AlistHelper-图形界面的Alist:聚合加载115/阿里云盘/百度网盘/OneDrive/迅雷/夸克/等20+网盘文......
  • Visual Studio AGDE插件
    AGDE(AndroidGameDevelopmentEnironment,安卓游戏开发环境)是一款VS插件,用于在VS中进行Android平台的C++Native代码构建、部署、调试和性能分析。可以从这里下载。①使用MSBuild构建(支持Incredibuild编译加速)并自动部署(deploy)到手机上。②使用LLDB作为C++调试器,不支持Java调......
  • Flash插件
    安装了有意思的自带特色的Flash中心后提示需修复一直无法下载EdgeIE360极速浏览器试一遍无法加载360安全浏览器未提示直接加载成功使用4399后关机充电再开机后提示导入本地收藏4399再次提示缺少Flash修复删除360安全浏览器后Edge成倍变卡,直接卡回十年前,惠普540是在告诉些......
  • edge浏览器网页长截图插件(将页面宽度设窄也适用)
    该插件的缺点:有时会排版错误;对于有些页面,会缺少部分文字;不能从“只当前位置向下”截图,只能整个页面或可见区域。插件安装和使用科X上网;用edge访问:捕捉网页截图-FireShot的-MicrosoftEdgeAddons打开要截图的页面点击该扩展:或等待自动滚动完成:另存为图片或“复......
  • 自动化视觉设备 设备机器视觉框架源码,已经修复大量 BUG,可以直接编译 C#联合Halcon混合
    自动化视觉设备设备机器视觉框架源码,已经修复大量BUG,可以直接编译C#联合Halcon混合编程源码,插件式开发,带手眼标定,相机静止和运动,支持C#脚本…ID:9215672790725673......