Get started with photoswipe CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.cdnhub.io/photoswipe/5.4.2/photoswipe.min.css">
  <link rel="stylesheet" href="https://cdn.cdnhub.io/photoswipe/5.4.2/default-skin/default-skin.min.css">
  <title>Get started with photoswipe CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/photoswipe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/photoswipe-ui-default.min.js"></script>
</head>
<body>
  <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>
    </div>
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__topbar">
        <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" aria-label="Zoom in" tabindex="0"></button>
      </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 class="gallery">
    <button class="gallery__button" data-pswp-item="images/image1.jpg">Open image 1</button>
    <button class="gallery__button" data-pswp-item="images/image2.jpg">Open image 2</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

https://cdn.cdnhub.io/photoswipe/5.4.4/photoswipe-lightbox.esm.js Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/photoswipe-lightbox.esm.js.map Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/photoswipe-lightbox.esm.min.js Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/photoswipe.css Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/photoswipe.esm.js Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/photoswipe.esm.js.map Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/photoswipe.esm.min.js Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/photoswipe.min.css Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/core/base.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/core/eventable.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/gestures/drag-handler.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/gestures/gestures.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/gestures/tap-handler.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/gestures/zoom-handler.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/keyboard.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/lightbox/lightbox.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/main-scroll.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/opener.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/photoswipe.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/scroll-wheel.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/slide/content.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/slide/get-thumb-bounds.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/slide/loader.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/slide/pan-bounds.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/slide/placeholder.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/slide/slide.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/slide/zoom-level.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/types.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/ui/button-arrow.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/ui/button-close.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/ui/button-zoom.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/ui/counter-indicator.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/ui/loading-indicator.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/ui/ui-element.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/ui/ui.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/util/animations.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/util/css-animation.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/util/dom-events.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/util/spring-animation.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/util/spring-easer.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/util/util.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/types/util/viewport-size.d.ts Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/umd/photoswipe-lightbox.umd.min.js Copied!

https://cdn.cdnhub.io/photoswipe/5.4.4/umd/photoswipe.umd.min.js Copied!

Get started with photoswipe CDN

Stable version

How to start using photoswipe CDN

All versions