photoswipe

ui-component carousel animation

PhotoSwipe is a simple yet powerful JavaScript gallery library that enables you to implement touch-enabled image galleries on both mobile and desktop. The library uses CSS3 for better performance and has a modular structure, allowing you to selectively use only the features you need.

Latest Ver 5.4.4

Homepage

Github

24,596

📢 PhotoSwipe is a touch-enabled image gallery library for mobile and desktop.

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe-lightbox.esm.js

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe-lightbox.esm.min.js

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe.esm.js

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe.esm.min.js

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/umd/photoswipe-lightbox.umd.min.js

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/umd/photoswipe.umd.min.js

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe.css

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe.min.css

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe-lightbox.esm.js.map

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe.esm.js.map

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/core/base.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/core/eventable.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/gestures/drag-handler.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/gestures/gestures.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/gestures/tap-handler.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/gestures/zoom-handler.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/keyboard.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/lightbox/lightbox.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/main-scroll.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/opener.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/photoswipe.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/scroll-wheel.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/slide/content.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/slide/get-thumb-bounds.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/slide/loader.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/slide/pan-bounds.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/slide/placeholder.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/slide/slide.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/slide/zoom-level.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/types.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/ui/button-arrow.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/ui/button-close.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/ui/button-zoom.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/ui/counter-indicator.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/ui/loading-indicator.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/ui/ui-element.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/ui/ui.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/util/animations.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/util/css-animation.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/util/dom-events.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/util/spring-animation.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/util/spring-easer.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/util/util.d.ts

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/types/util/viewport-size.d.ts

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<div class='my-gallery' itemscope itemtype='http://schema.org/ImageGallery'>
  <figure itemprop='associatedMedia' itemscope itemtype='http://schema.org/ImageObject'>
    <a href='https://placekitten.com/800/600' itemprop='contentUrl' data-size='800x600'>
      <img src='https://placekitten.com/200/150' itemprop='thumbnail' alt='Image description' />
    </a>
    <figcaption itemprop='caption description'>Sample image 1</figcaption>
  </figure>
</div>

<div class='pswp' tabindex='-1' role='dialog' aria-hidden='true'>
  <div class='pswp__bg'></div>
  <div class='pswp__scroll-wrap'>
    <div class='pswp__container'>
      <div class='pswp__item'></div>
      <div class='pswp__item'></div>
      <div class='pswp__item'></div>
    </div>
    <div class='pswp__ui pswp__ui--hidden'>
      <div class='pswp__top-bar'>
        <div class='pswp__counter'></div>
        <button class='pswp__button pswp__button--close' title='Close (Esc)'></button>
        <button class='pswp__button pswp__button--share' title='Share'></button>
        <button class='pswp__button pswp__button--fs' title='Toggle fullscreen'></button>
        <button class='pswp__button pswp__button--zoom' title='Zoom in/out'></button>
        <div class='pswp__preloader'>
          <div class='pswp__preloader__icn'>
            <div class='pswp__preloader__cut'>
              <div class='pswp__preloader__donut'></div>
            </div>
          </div>
        </div>
      </div>
      <div class='pswp__share-modal pswp__share-modal--hidden pswp__single-tap'>
        <div class='pswp__share-tooltip'></div>
      </div>
      <button class='pswp__button pswp__button--arrow--left' title='Previous (arrow left)'></button>
      <button class='pswp__button pswp__button--arrow--right' title='Next (arrow right)'></button>
      <div class='pswp__caption'>
        <div class='pswp__caption__center'></div>
      </div>
    </div>
  </div>
</div>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>

⚙️ JavaScript
document.addEventListener('DOMContentLoaded', function() {
  var initPhotoSwipeFromDOM = function(gallerySelector) {
    var parseThumbnailElements = function(el) {
      var thumbElements = el.childNodes,
          numNodes = thumbElements.length,
          items = [],
          figureEl,
          linkEl,
          size,
          item;
      for(var i = 0; i < numNodes; i++) {
        figureEl = thumbElements[i];
        if(figureEl.nodeType !== 1) {
          continue;
        }
        linkEl = figureEl.children[0];
        size = linkEl.getAttribute('data-size').split('x');
        item = {
          src: linkEl.getAttribute('href'),
          w: parseInt(size[0], 10),
          h: parseInt(size[1], 10)
        };
        if(figureEl.children.length > 1) {
          item.title = figureEl.children[1].innerHTML;
        }
        if(linkEl.children.length > 0) {
          item.msrc = linkEl.children[0].getAttribute('src');
        }
        item.el = figureEl;
        items.push(item);
      }
      return items;
    };
    var closest = function closest(el, fn) {
      return el && (fn(el) ? el : closest(el.parentNode, fn));
    };
    var onThumbnailsClick = function(e) {
      e = e || window.event;
      e.preventDefault ? e.preventDefault() : e.returnValue = false;
      var eTarget = e.target || e.srcElement;
      var clickedListItem = closest(eTarget, function(el) {
        return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
      });
      if(!clickedListItem) {
        return;
      }
      var clickedGallery = clickedListItem.parentNode,
          childNodes = clickedListItem.parentNode.childNodes,
          numChildNodes = childNodes.length,
          nodeIndex = 0,
          index;
      for (var i = 0; i < numChildNodes; i++) {
        if(childNodes[i].nodeType !== 1) {
          continue;
        }
        if(childNodes[i] === clickedListItem) {
          index = nodeIndex;
          break;
        }
        nodeIndex++;
      }
      if(index >= 0) {
        openPhotoSwipe(index, clickedGallery);
      }
      return false;
    };
    var photoswipeParseHash = function() {
      var hash = window.location.hash.substring(1),
      params = {};
      if(hash.length < 5) {
        return params;
      }
      var vars = hash.split('&');
      for (var i = 0; i < vars.length; i++) {
        if(!vars[i]) {
          continue;
        }
        var pair = vars[i].split('=');
        if(pair.length < 2) {
          continue;
        }
        params[pair[0]] = pair[1];
      }
      if(params.gid) {
        params.gid = parseInt(params.gid, 10);
      }
      return params;
    };
    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
      var pswpElement = document.querySelectorAll('.pswp')[0],
          gallery,
          options,
          items;
      items = parseThumbnailElements(galleryElement);
      options = {
        galleryUID: galleryElement.getAttribute('data-pswp-uid'),
        getThumbBoundsFn: function(index) {
          var thumbnail = items[index].el.getElementsByTagName('img')[0],
              pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
              rect = thumbnail.getBoundingClientRect(); 
          return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
        }
      };
      if(fromURL) {
        if(options.galleryPIDs) {
          for(var j = 0; j < items.length; j++) {
            if(items[j].pid == index) {
              options.index = j;
              break;
            }
          }
        } else {
          options.index = parseInt(index, 10) - 1;
        }
      } else {
        options.index = parseInt(index, 10);
      }
      if( isNaN(options.index) ) {
        return;
      }
      if(disableAnimation) {
        options.showAnimationDuration = 0;
      }
      gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
      gallery.init();
    };
    var galleryElements = document.querySelectorAll(gallerySelector);
    for(var i = 0, l = galleryElements.length; i < l; i++) {
      galleryElements[i].setAttribute('data-pswp-uid', i+1);
      galleryElements[i].onclick = onThumbnailsClick;
    }
    var hashData = photoswipeParseHash();
    if(hashData.pid && hashData.gid) {
      openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1], true, true);
    }
  };
  initPhotoSwipeFromDOM('.my-gallery');
});