CodePen Embed - Using Photoswipe

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2">

      <h1 class="text-center">
          Photoswipe Example<br>
        </h1>

      <!-- Galley wrapper that contains all items -->
      <div id="gallery" class="gallery" itemscope itemtype="http://schema.org/ImageGallery">

        <!-- Use figure for a more semantic html -->
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <!-- Link to the big image, not mandatory, but usefull when there is no JS -->
          <a href="https://unsplash.it/1200/900/?image=702" data-caption="Sea side, south shore<br><em class='text-muted'>© Dominik Schröder</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <!-- Thumbnail -->
            <img src="https://unsplash.it/400/300/?image=702" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>

        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=695" data-caption="Sunset in the wheat field<br><em class='text-muted'>© Jordan McQueen</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=695" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=675" data-caption="Mysterious ocean<br><em class='text-muted'>© Barn Images</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=675" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=651" data-caption="Cloud over the mountains<br><em class='text-muted'>© James Pritchett</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=651" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=584" data-caption="Icelandic horses<br><em class='text-muted'>© Bethany Legg</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=584" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=574" data-caption="Sea side, south shore<br><em class='text-muted'>© Julien Lavallée</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=574" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=551" data-caption="Sunset on the highland road<br><em class='text-muted'>© Forrest Cavale</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=551" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=509" data-caption="Seljalandsfoss waterfall<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=509" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=511" data-caption="Fjadrarglufur canyon, south shore<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=511" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=515" data-caption="Eerie wreckage of a crashed U.S. Navy aircraft<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=515" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=512" data-caption="Blue Lagoon<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=512" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="https://unsplash.it/1200/900/?image=514" data-caption="Sunny Reykjavik street<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
            <img src="https://unsplash.it/400/300/?image=514" itemprop="thumbnail" alt="Image description">
          </a>
        </figure>
      </div>

    </div>
  </div>
</div>

<!-- Some spacing 😉 -->
<div class="spacer"></div>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- Background of PhotoSwipe. 
           It's a separate element as animating opacity is faster than rgba(). -->
  <div class="pswp__bg"></div>
  <!-- Slides wrapper with overflow:hidden. -->
  <div class="pswp__scroll-wrap">
    <!-- Container that holds slides. 
              PhotoSwipe keeps only 3 of them in the DOM to save memory.
              Don't modify these 3 pswp__item elements, data is added later on. -->
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <!--  Controls are self-explanatory. Order can be changed. -->
        <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>
        <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
        <!-- element will get class pswp__preloader--active when preloader is running -->
        <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>

body {font-family: 'Bitter', Georgia, Times, sans-serif;}
    h1 {margin: 2em;}
    .pswp__caption__center {text-align: center;}
    figure {
      display: inline-block;
      width: 33.333%;
      float: left;
    }
    img {width: 100%;}
    .spacer {height: 5em;}

'use strict';

/* global jQuery, PhotoSwipe, PhotoSwipeUI_Default, console */

(function($) {

  // Init empty gallery array
  var container = [];

  // Loop over gallery items and push it to the array
  $('#gallery').find('figure').each(function() {
    var $link = $(this).find('a'),
      item = {
        src: $link.attr('href'),
        w: $link.data('width'),
        h: $link.data('height'),
        title: $link.data('caption')
      };
    container.push(item);
  });

  // Define click event on gallery item
  $('a').click(function(event) {

    // Prevent location change
    event.preventDefault();

    // Define object and gallery options
    var $pswp = $('.pswp')[0],
      options = {
        index: $(this).parent('figure').index(),
        bgOpacity: 0.85,
        showHideOpacity: true
      };

    // Initialize PhotoSwipe
    var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
    gallery.init();
  });

}(jQuery));

This Pen is owned by DDev on CodePen.

See more by @divyaddev on CodePen

External CSS

External JavaScript