PhotoSwipe 图片浏览JS插件

  347 次阅读

CONTENT

一、介绍:

PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。
官方网站:http://photoswipe.com/
源码下载:https://github.com/dimsemenov/photoswipe
国内CDN:http://www.bootcdn.cn/photoswipe/

二、构建网页:

1、新建html页面,如果是移动端看的话,需要在页面头部插入视口说明:

  1. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

2、引入 photoswipe.css、default-skin.css 文件,引入 photoswipe.js、photoswipe-ui-default.js 文件。

  1. <link href="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe.css" rel="stylesheet">
  2. <link href="http://cdn.bootcss.com/photoswipe/4.1.1/default-skin/default-skin.css" rel="stylesheet">
  3. <script src="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe.js"></script>
  4. <script src="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe-ui-default.js"></script>

三、HTML前端:

  1. <div id="demo-test-gallery" class="demo-gallery">
  2.     <a href="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" data-size="1600x1600" data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" data-med-size="1024x1024">
  3.         <img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="" />
  4.     </a>
  5.  
  6.     <a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x1024">
  7.         <img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" />
  8.     </a>
  9. </div>

注意:一定要有“data-med”这个属性,否则在移动端显示不出来;一定要用一个容器把图片包含起来。

四、启动代码:

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

五、JS代码:

  1. <script type="text/javascript">
    
  2.     (function() {
    
  3.  
  4.         var initPhotoSwipeFromDOM = function(gallerySelector) {
    
  5.  
  6.             var parseThumbnailElements = function(el) {
    
  7.                 var thumbElements = el.childNodes,
    
  8.                         numNodes = thumbElements.length,
    
  9.                         items = [],
    
  10.                         el,
    
  11.                         childElements,
    
  12.                         thumbnailEl,
    
  13.                         size,
    
  14.                         item;
    
  15.  
  16.                 for(var i = 0; i < numNodes; i++) {
    
  17.                     el = thumbElements[i];
    
  18.  
  19.                     // include only element nodes
    
  20.                     if(el.nodeType !== 1) {
    
  21.                         continue;
    
  22.                     }
    
  23.  
  24.                     childElements = el.children;
    
  25.  
  26.                     size = el.getAttribute('data-size').split('x');
    
  27.  
  28.                     // create slide object
    
  29.                     item = {
    
  30.                         src: el.getAttribute('href'),
    
  31.                         w: parseInt(size[0], 10),
    
  32.                         h: parseInt(size[1], 10),
    
  33.                         author: el.getAttribute('data-author')
    
  34.                     };
    
  35.  
  36.                     item.el = el; // save link to element for getThumbBoundsFn
    
  37.  
  38.                     if(childElements.length > 0) {
    
  39.                         item.msrc = childElements[0].getAttribute('src'); // thumbnail url
    
  40.                         if(childElements.length > 1) {
    
  41.                             item.title = childElements[1].innerHTML; // caption (contents of figure)
    
  42.                         }
    
  43.                     }
    
  44.  
  45.  
  46.                     var mediumSrc = el.getAttribute('data-med');
    
  47.                     if(mediumSrc) {
    
  48.                         size = el.getAttribute('data-med-size').split('x');
    
  49.                         // "medium-sized" image
    
  50.                         item.m = {
    
  51.                             src: mediumSrc,
    
  52.                             w: parseInt(size[0], 10),
    
  53.                             h: parseInt(size[1], 10)
    
  54.                         };
    
  55.                     }
    
  56.                     // original image
    
  57.                     item.o = {
    
  58.                         src: item.src,
    
  59.                         w: item.w,
    
  60.                         h: item.h
    
  61.                     };
    
  62.  
  63.                     items.push(item);
    
  64.                 }
    
  65.  
  66.                 return items;
    
  67.             };
    
  68.  
  69.             // find nearest parent element
    
  70.             var closest = function closest(el, fn) {
    
  71.                 return el && ( fn(el) ? el : closest(el.parentNode, fn) );
    
  72.             };
    
  73.  
  74.             var onThumbnailsClick = function(e) {
    
  75.                 e = e || window.event;
    
  76.                 e.preventDefault ? e.preventDefault() : e.returnValue = false;
    
  77.  
  78.                 var eTarget = e.target || e.srcElement;
    
  79.  
  80.                 var clickedListItem = closest(eTarget, function(el) {
    
  81.                     return el.tagName === 'A';
    
  82.                 });
    
  83.  
  84.                 if(!clickedListItem) {
    
  85.                     return;
    
  86.                 }
    
  87.  
  88.                 var clickedGallery = clickedListItem.parentNode;
    
  89.  
  90.                 var childNodes = clickedListItem.parentNode.childNodes,
    
  91.                         numChildNodes = childNodes.length,
    
  92.                         nodeIndex = 0,
    
  93.                         index;
    
  94.  
  95.                 for (var i = 0; i < numChildNodes; i++) {
    
  96.                     if(childNodes[i].nodeType !== 1) {
    
  97.                         continue;
    
  98.                     }
    
  99.  
  100.                     if(childNodes[i] === clickedListItem) {
    
  101.                         index = nodeIndex;
    
  102.                         break;
    
  103.                     }
    
  104.                     nodeIndex++;
    
  105.                 }
    
  106.  
  107.                 if(index >= 0) {
    
  108.                     openPhotoSwipe( index, clickedGallery );
    
  109.                 }
    
  110.                 return false;
    
  111.             };
    
  112.  
  113.             var photoswipeParseHash = function() {
    
  114.                 var hash = window.location.hash.substring(1),
    
  115.                         params = {};
    
  116.  
  117.                 if(hash.length < 5) { // pid=1
    
  118.                     return params;
    
  119.                 }
    
  120.  
  121.                 var vars = hash.split('&');
    
  122.                 for (var i = 0; i < vars.length; i++) {
    
  123.                     if(!vars[i]) {
    
  124.                         continue;
    
  125.                     }
    
  126.                     var pair = vars[i].split('=');
    
  127.                     if(pair.length < 2) {
    
  128.                         continue;
    
  129.                     }
    
  130.                     params[pair[0]] = pair[1];
    
  131.                 }
    
  132.  
  133.                 if(params.gid) {
    
  134.                     params.gid = parseInt(params.gid, 10);
    
  135.                 }
    
  136.  
  137.                 return params;
    
  138.             };
    
  139.  
  140.             var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
    
  141.                 var pswpElement = document.querySelectorAll('.pswp')[0],
    
  142.                         gallery,
    
  143.                         options,
    
  144.                         items;
    
  145.  
  146.                 items = parseThumbnailElements(galleryElement);
    
  147.  
  148.                 // define options (if needed)
    
  149.                 options = {
    
  150.  
  151.                     galleryUID: galleryElement.getAttribute('data-pswp-uid'),
    
  152.  
  153.                     getThumbBoundsFn: function(index) {
    
  154.                         // See Options->getThumbBoundsFn section of docs for more info
    
  155.                         var thumbnail = items[index].el.children[0],
    
  156.                                 pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
    
  157.                                 rect = thumbnail.getBoundingClientRect();
    
  158.  
  159.                         return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
    
  160.                     },
    
  161.  
  162.                     addCaptionHTMLFn: function(item, captionEl, isFake) {
    
  163.                         if(!item.title) {
    
  164.                             captionEl.children[0].innerText = '';
    
  165.                             return false;
    
  166.                         }
    
  167.                         captionEl.children[0].innerHTML = item.title +  '<br/><small>Photo: ' + item.author + '</small>';
    
  168.                         return true;
    
  169.                     }
    
  170.  
  171.                 };
    
  172.  
  173.                 // options for control bar
    
  174.                 options.shareEl = false;
    
  175.                 options.fullscreenEl = false;
    
  176.  
  177.                 if(fromURL) {
    
  178.                     if(options.galleryPIDs) {
    
  179.                         // parse real index when custom PIDs are used
    
  180.                         // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
    
  181.                         for(var j = 0; j < items.length; j++) {
    
  182.                             if(items[j].pid == index) {
    
  183.                                 options.index = j;
    
  184.                                 break;
    
  185.                             }
    
  186.                         }
    
  187.                     } else {
    
  188.                         options.index = parseInt(index, 10) - 1;
    
  189.                     }
    
  190.                 } else {
    
  191.                     options.index = parseInt(index, 10);
    
  192.                 }
    
  193.  
  194.                 // exit if index not found
    
  195.                 if( isNaN(options.index) ) {
    
  196.                     return;
    
  197.                 }
    
  198.  
  199.  
  200.  
  201.                 // Pass data to PhotoSwipe and initialize it
    
  202.                 gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    
  203.  
  204.                 // see: http://photoswipe.com/documentation/responsive-images.html
    
  205.                 var realViewportWidth,
    
  206.                         useLargeImages = false,
    
  207.                         firstResize = true,
    
  208.                         imageSrcWillChange;
    
  209.  
  210.                 gallery.listen('beforeResize', function() {
    
  211.  
  212.                     var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
    
  213.                     dpiRatio = Math.min(dpiRatio, 2.5);
    
  214.                     realViewportWidth = gallery.viewportSize.x * dpiRatio;
    
  215.  
  216.  
  217.                     if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
    
  218.                         if(!useLargeImages) {
    
  219.                             useLargeImages = true;
    
  220.                             imageSrcWillChange = true;
    
  221.                         }
    
  222.  
  223.                     } else {
    
  224.                         if(useLargeImages) {
    
  225.                             useLargeImages = false;
    
  226.                             imageSrcWillChange = true;
    
  227.                         }
    
  228.                     }
    
  229.  
  230.                     if(imageSrcWillChange && !firstResize) {
    
  231.                         gallery.invalidateCurrItems();
    
  232.                     }
    
  233.  
  234.                     if(firstResize) {
    
  235.                         firstResize = false;
    
  236.                     }
    
  237.  
  238.                     imageSrcWillChange = false;
    
  239.  
  240.                 });
    
  241.  
  242.                 gallery.listen('gettingData', function(index, item) {
    
  243.                     if( useLargeImages ) {
    
  244.                         item.src = item.o.src;
    
  245.                         item.w = item.o.w;
    
  246.                         item.h = item.o.h;
    
  247.                     } else {
    
  248.                         item.src = item.m.src;
    
  249.                         item.w = item.m.w;
    
  250.                         item.h = item.m.h;
    
  251.                     }
    
  252.                 });
    
  253.  
  254.                 gallery.init();
    
  255.             };
    
  256.  
  257.             // select all gallery elements
    
  258.             var galleryElements = document.querySelectorAll( gallerySelector );
    
  259.             for(var i = 0, l = galleryElements.length; i < l; i++) {
    
  260.                 galleryElements[i].setAttribute('data-pswp-uid', i+1);
    
  261.                 galleryElements[i].onclick = onThumbnailsClick;
    
  262.             }
    
  263.  
  264.             // Parse URL and open gallery if it contains #&pid=3&gid=1
    
  265.             var hashData = photoswipeParseHash();
    
  266.             if(hashData.pid && hashData.gid) {
    
  267.                 openPhotoSwipe( hashData.pid,  galleryElements[ hashData.gid - 1 ], true, true );
    
  268.             }
    
  269.         };
    
  270.  
  271.         initPhotoSwipeFromDOM('.demo-gallery');
    
  272.  
  273.     })();
    
  274.  
  275. </script>

Comments | NOTHING

暂无评论...