开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 dedecms 苹果 修真图
当前位置：首页 > 网页特效 > 移动端 >  移动设备图片库 PhotoSwipe

移动设备图片库 PhotoSwipe

  • 源码大小：854.59KB
  • 所需积分：1积分
  • 源码编号：19JP-3119
  • 浏览次数：1115次
  • 最后更新：2023年05月07日
  • 所属栏目：移动端
我要下载
加入收藏
本站默认解压密码：19jp.com 或 19jp_com

最新资源

[软件工具] 雷神网游加速器 免费体验
[软件工具] 360极速浏览器X 64位
[免扣元素] 541款水果无底图PNG素材高像素高清水果图片免扣素材水果坚果
[软件工具] 正则表达式生成工具 v2.1 绿色免费版
[软件工具] 取色软件Pipette v21.5.5 中文绿色版 取色器
[后台模板] 基于bootstrap后台管理模板
[后台模板] 紫色渐变OA系统后台模板
[公司企业] 数字科技企业机构HTML5模板
[公司企业] 房产物业公司Bootstrap模板
[后台模板] 后台数据统计Bootstrap5模板

简介

PhotoSwipe是一个Vanilla JavaScript图像库，专为移动设备和触摸设备设计。

它为您的访问者提供了一个熟悉而直观的界面，使他们能够与您的移动网站上的图像进行交互。

安装和下载：

  1. # NPM
  2. $ npm install photoswipe --save

如何使用它:

1.在网页上包含PhotoSwipe的核心JavaScript和UI库。

  1. <script src="/path/to/photoswipe.min.js"></script> 
  2. <script src="/path/to/photoswipe-ui-default.min.js"></script>

2.在网页上包含PhotoSwipe的核心样式表和您选择的主题CSS。

  1. <link rel="stylesheet" href="/path/to/photoswipe.css"> 
  2. <link rel="stylesheet" href="/path/to/default-skin/default-skin.css">

3.为照片擦除创建HTML模板。

  1. <!-- Root element of PhotoSwipe. Must have class pswp. -->
  2. <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  3.  
  4.   <!-- Background of PhotoSwipe. 
  5.        It's a separate element as animating opacity is faster than rgba(). -->
  6.   <div class="pswp__bg"></div>
  7.  
  8.   <!-- Slides wrapper with overflow:hidden. -->
  9.   <div class="pswp__scroll-wrap">
  10.  
  11.       <!-- Container that holds slides. 
  12.           PhotoSwipe keeps only 3 of them in the DOM to save memory.
  13.           Don't modify these 3 pswp__item elements, data is added later on. -->
  14.       <div class="pswp__container">
  15.           <div class="pswp__item"></div>
  16.           <div class="pswp__item"></div>
  17.           <div class="pswp__item"></div>
  18.       </div>
  19.  
  20.       <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  21.       <div class="pswp__ui pswp__ui--hidden">
  22.  
  23.           <div class="pswp__top-bar">
  24.  
  25.               <!--  Controls are self-explanatory. Order can be changed. -->
  26.  
  27.               <div class="pswp__counter"></div>
  28.  
  29.               <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  30.  
  31.               <button class="pswp__button pswp__button--share" title="Share"></button>
  32.  
  33.               <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  34.  
  35.               <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  36.  
  37.               <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
  38.               <!-- element will get class pswp__preloader--active when preloader is running -->
  39.               <div class="pswp__preloader">
  40.                   <div class="pswp__preloader__icn">
  41.                     <div class="pswp__preloader__cut">
  42.                       <div class="pswp__preloader__donut"></div>
  43.                     </div>
  44.                   </div>
  45.               </div>
  46.           </div>
  47.  
  48.           <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  49.               <div class="pswp__share-tooltip"></div> 
  50.           </div>
  51.  
  52.           <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  53.           </button>
  54.  
  55.           <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  56.           </button>
  57.  
  58.           <div class="pswp__caption">
  59.               <div class="pswp__caption__center"></div>
  60.           </div>
  61.  
  62.       </div>
  63.  
  64.   </div>
  65.  
  66. </div>

4.初始化PhotoSwipe。

  1. var pswpElement = document.querySelectorAll('.pswp')[0];
  2.  
  3. // build items array
  4. var items = [
  5.     {
  6.         src: 'https://placekitten.com/600/400',
  7.         w: 600,
  8.         h: 400
  9.     },
  10.     {
  11.         src: 'https://placekitten.com/1200/900',
  12.         w: 1200,
  13.         h: 900
  14.     }
  15. ];
  16.  
  17. // define options (if needed)
  18. var options = {
  19.     // optionName: 'option value'
  20.     // for example:
  21.     index: 0 // start at first slide
  22. };
  23.  
  24. // Initializes and opens PhotoSwipe
  25. var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
  26. gallery.init();

5.可用配置选项

  1. {
  2.  
  3.   // allow swipe navigation to next/prev item
  4.   allowPanToNext:true,
  5.  
  6.   // Spacing ratio between slides
  7.   spacing: 0.12,
  8.  
  9.   // opacity of background
  10.   bgOpacity: 1,
  11.  
  12.   // predefine if mouse was used or not
  13.   mouseUsed: false,
  14.  
  15.   // infinite loop
  16.   loop: true,
  17.  
  18.   // pinch to close
  19.   pinchToClose: true,
  20.  
  21.   // close on scroll
  22.   closeOnScroll: true,
  23.  
  24.   // close on vertical drag
  25.   closeOnVerticalDrag: true,
  26.  
  27.   // vertical drag range
  28.   verticalDragRange: 0.75,
  29.  
  30.   // duration of animation
  31.   hideAnimationDuration: 333,
  32.   showAnimationDuration: 333,
  33.  
  34.   // enable/disable show/hide opacity
  35.   showHideOpacity: false,
  36.  
  37.   // auto set focus on element
  38.   focus: true,
  39.  
  40.   // ESC to close
  41.   escKey: true,
  42.  
  43.   // enable arrow keys
  44.   arrowKeys: true,
  45.  
  46.   // main scroll end friction
  47.   mainScrollEndFriction: 0.35,
  48.  
  49.   // pan end friction
  50.   panEndFriction: 0.35,
  51.  
  52.   // function
  53.   isClickableElement: function(el) {
  54.     return el.tagName === 'A';
  55.   },
  56.  
  57.   // function
  58.   getDoubleTapZoom: function(isMouseClick, item) {
  59.     if(isMouseClick) {
  60.       return 1;
  61.     } else {
  62.       return item.initialZoomLevel < 0.7 ? 1 : 1.33;
  63.     }
  64.   },
  65.  
  66.   // max spread zoom
  67.   maxSpreadZoom: 1.33,
  68.  
  69.   // modal mode
  70.   modal: true
  71.  
  72. }

6.默认UI选项。

  1. {
  2.  
  3.   // Size of top & bottom bars in pixels,
  4.   // "bottom" parameter can be 'auto' (will calculate height of caption)
  5.   // option applies only when mouse is used, 
  6.   // or width of screen is more than 1200px
  7.   // 
  8.   // (Also refer to `parseVerticalMargin` event)
  9.   barsSize: {top:44, bottom:'auto'}, 
  10.  
  11.   // Adds class pswp__ui--idle to pswp__ui element when mouse isn't moving for 4000ms
  12.   timeToIdle: 4000,
  13.  
  14.   // Same as above, but this timer applies when mouse leaves the window
  15.   timeToIdleOutside: 1000,
  16.  
  17.   // Delay until loading indicator is displayed
  18.   loadingIndicatorDelay: 1000,
  19.  
  20.   // Function builds caption markup
  21.   addCaptionHTMLFn: function(item, captionEl, isFake) {
  22.     // item      - slide object
  23.     // captionEl - caption DOM element
  24.     // isFake    - true when content is added to fake caption container
  25.     //             (used to get size of next or previous caption)
  26.  
  27.     if(!item.title) {
  28.         captionEl.children[0].innerHTML = '';
  29.         return false;
  30.     }
  31.     captionEl.children[0].innerHTML = item.title;
  32.     return true;
  33.   },
  34.  
  35.   // Buttons/elements
  36.   closeEl:true,
  37.   captionEl: true,
  38.   fullscreenEl: true,
  39.   zoomEl: true,
  40.   shareEl: true,
  41.   counterEl: true,
  42.   arrowEl: true,
  43.   preloaderEl: true,
  44.  
  45.   // Tap on sliding area should close gallery
  46.   tapToClose: false,
  47.  
  48.   // Tap should toggle visibility of controls
  49.   tapToToggleControls: true,
  50.  
  51.   // Mouse click on image should close the gallery,
  52.   // only when image is smaller than size of the viewport
  53.   clickToCloseNonZoomable: true,
  54.  
  55.   // Element classes click on which should close the PhotoSwipe.
  56.   // In HTML markup, class should always start with "pswp__", e.g.: "pswp__item", "pswp__caption".
  57.   // 
  58.   // "pswp__ui--over-close" class will be added to root element of UI when mouse is over one of these elements
  59.   // By default it's used to highlight the close button.
  60.   closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'], 
  61.  
  62.   // Separator for "1 of X" counter
  63.   indexIndicatorSep: ' / ',
  64.  
  65.  
  66.  
  67.   // Share buttons
  68.   // 
  69.   // Available variables for URL:
  70.   // {{url}}             - url to current page
  71.   // {{text}}            - title
  72.   // {{image_url}}       - encoded image url
  73.   // {{raw_image_url}}   - raw image url
  74.   shareButtons: [
  75.     {id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
  76.     {id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
  77.     {id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
  78.     {id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
  79.   ],
  80.  
  81.  
  82.   // Next 3 functions return data for share links
  83.   // 
  84.   // functions are triggered after click on button that opens share modal,
  85.   // which means that data should be about current (active) slide
  86.   getImageURLForShare: function( shareButtonData ) {
  87.     // `shareButtonData` - object from shareButtons array
  88.     // 
  89.     // `pswp` is the gallery instance object,
  90.     // you should define it by yourself
  91.     // 
  92.     return pswp.currItem.src || '';
  93.   },
  94.   getPageURLForShare: function( shareButtonData ) {
  95.     return window.location.href;
  96.   },
  97.   getTextForShare: function( shareButtonData ) {
  98.     return pswp.currItem.title || '';
  99.   },
  100.  
  101.   // Parse output of share links
  102.   parseShareButtonOut: function(shareButtonData, shareButtonOut) {
  103.     // `shareButtonData` - object from shareButtons array
  104.     // `shareButtonOut` - raw string of share link element
  105.     return shareButtonOut;
  106.   }
  107. }

更新日志：

v5.3.7版本（2023-03-29）

  • 错误修复

v5.3.6版本（2023-02-27）

  • 修复了导致延迟加载完整映像（来自src）而不是srcset的问题。此问题是由先前版本（5.3.5）引起的。
  • 尽可能使用classList.toggle

v5.3.5版本（2023-02-01）

  • 错误修复程序

v5.3.4（2022-11-22年）

  • 在应用aria属性之前检查元素是否存在

v5.3.0版本（2022-10-25）

  • 修复了错误。

v5.3.0版本（2022-07-23）

  • 调整放大的类行为以反映切换的Zoom方法

v5.2.2 (2022-03-28)

  • ES6中的代码质量和重写
  • 更简单的初始化和动态导入支持
  • 动画和手势引擎更新
  • 单个CSS文件，无外部资产
  • 内置响应图像支持
  • 以缩放状态打开图像
  • 从核心中删除了一些功能
  • 文件更新（待定）

第4.1.3版（2019-01-09）

  • 这个小补丁修复了输入端有多种类型、运行Windows 10和Chrome的设备的问题。

2017-04-07

  • 修复iOS 10.3调整大小错误

2017-04-07

  • 修复iOS 10.3调整大小错误

预览截图

相关热词： PhotoSwipe图片库设备移动
上一篇：没有了
下一篇：没有了

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1