PhotoSwipe简介

太过爱你忘了你带给我的痛 2022-04-23 11:18 207阅读 0赞

转自：http://blog.csdn.net/renfufei/article/details/10360855

**官方介绍**  
PhotoSwipe 是专为移动触摸设备设计的相册/[画廊][Link 1].兼容所有[iPhone][]、iPad、[黑莓][Link 2]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，在源码包内也提供了相应的版本.

**类库引用**

**\[html\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  
2.  <script type="text/javascript" src="klass.min.js"></script>
3.  
4.  <script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>

调用代码

**\[javascript\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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** ，则调用代码如下：

**\[javascript\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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代码

**\[html\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  
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>

参数说明

**\[javascript\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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. Aggressive 模式将会积极地地设置非 "当前，上一张,下一张"的图片为空的类型. 对于老版本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内显示，可能非全屏。

自定义函数

**\[javascript\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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. longDescription: el.getAttribute(el, 'data-long-description')
22. \}
23. \}

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

**\[javascript\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  // 在android 手机上多个层次触发点击,我们采用的是用定时器进行拦截
2.  
3.  var event\_timeout = 500;// 预防多次事件触发 
4.  // 阻止短时间内连续事件
5.  var multiClickPrevent = false;
6.  function preventMultiClick()\{
7.  if(multiClickPrevent)\{
8.  return false;
9.  \}
10. multiClickPrevent = true;
11. window.setTimeout(function()\{
12. multiClickPrevent = 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. specialClick = "touchstart click";
24. \} else if(likeAndroid)\{
25. specialClick = "touchstart click";
26. \}
27. 再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjunshow][https_blog.csdn.net_jiangjunshow]

[Link 1]: https://www.baidu.com/s?wd=%E7%94%BB%E5%BB%8A&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[iPhone]: https://www.baidu.com/s?wd=iPhone&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[Link 2]: https://www.baidu.com/s?wd=%E9%BB%91%E8%8E%93&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[view plain]: http://blog.csdn.net/renfufei/article/details/10360855#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/117960
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/117960/fork
[https_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 java简介(Java简介英文)

什么是java Java是由Sun微系统公司所发展出来的程序语言，它本身是一种对象导向(Object-Oriented)的程序语言。JAVA目前在手机上应用最多的就是JA

旧城等待，/ 2023年09月26日 15:27/ 0 赞/ 315 阅读

相关 jsp简介(jsp简介通俗)

JSP简介有哪些呢？生成内容的逻辑被封装在标识和JavaBeans组件中，并且捆绑在脚本中，所有的脚本在服务器端运行 ![jsp简介(jsp简介通俗)\_jsp简介(

╰+哭是因爲堅強的太久メ/ 2023年09月26日 14:44/ 0 赞/ 123 阅读

相关简介

第一章：简介（一）Redis介绍 Redis（全称：Remote Dictionary Server 远程字典服务）是一个开源的使用ANSI C语言编写、支持网络、可

骑猪看日落/ 2023年07月06日 09:58/ 0 赞/ 46 阅读

相关一段代码，vue如何使用photoswipe

使用npm安装photoswipe npm i photoswipe 编辑photoswipe的vue组件 <template>

- 日理万妓/ 2023年02月16日 05:52/ 0 赞/ 35 阅读

相关 django简介_Django简介

![460ccdfb7329e7093fbc191784698cce.png][] django简介 Hello everyone, from today we’re go

深碍√TFBOYSˉ_/ 2022年12月08日 04:45/ 0 赞/ 397 阅读

相关 tensorflow简介_TensorFlow简介

![cf07a7f372098f61b791fced111fddcb.png][] tensorflow简介 Here you will get TensorFlow in

迷南。/ 2022年12月07日 13:29/ 0 赞/ 403 阅读

相关 PhotoSwipe简介

转自：http://blog.csdn.net/renfufei/article/details/10360855 官方介绍 PhotoSwipe 是专为移动触摸设备设计

太过爱你忘了你带给我的痛/ 2022年04月23日 11:18/ 0 赞/ 208 阅读

相关 jq封装PhotoSwipe的使用方法

官方网站：[http://photoswipe.com/ ][http_photoswipe.com_] 源码下载：[https://github.com/dimsemen

小咪咪/ 2022年03月26日 08:07/ 0 赞/ 259 阅读

相关 photoswipe.js插件

PhotoSwipe.js官网：[http://photoswipe.com/][http_photoswipe.com]，在这个网站上可以下载到PhotoSwipe的文件以及

左手的ㄟ右手/ 2021年09月12日 07:44/ 0 赞/ 414 阅读

相关百度上传图片webuploader与photoswipe预览图片

我结合amaze UI做的，大家可以参考看看 ![20170606135329803][] 一.引用 1.amazeUI <link rel="styleshe

短命女/ 2021年09月12日 07:36/ 0 赞/ 606 阅读