Overview using a Photoswipe.js

by Anurak Sumranphan

HTML

<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css">
<div class="post-single pswp-gallery">
  <figure class="post-thumbnail">
    <a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" data-size="1152x768">
      <img src="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" alt="Photoswipe thumbnail 1">
    </a>
  </figure>
  
  <div class="post-gallery">
    <figure class="gallery-item">
      <a href="https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg" data-size="1152x768">
        <img src="https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg" alt="Photoswipe thumbnail 2">
      </a>
    </figure>

    <figure class="gallery-item">
      <a href="https://farm6.staticflickr.com/5584/14985868676_b51baa4071_h.jpg" data-size="1152x768">
        <img src="https://farm6.staticflickr.com/5584/14985868676_b51baa4071_h.jpg" alt="Photoswipe thumbnail 3">
      </a>
    </figure>

    <figure class="gallery-item">
      <a href="https://farm4.staticflickr.com/3920/15008465772_d50c8f0531_h.jpg" data-size="1152x768">
        <img src="https://farm4.staticflickr.com/3920/15008465772_d50c8f0531_h.jpg" alt="Photoswipe thumbnail 4">
      </a>
    </figure>
  </div>
</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...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

figure {
  margin: 0;
}

a > img {
  max-width: 100%;
}

.post-thumbnail {
  margin-bottom: 16px;
}

.post-gallery {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.post-gallery > .gallery-item {
  flex: 0 0 auto;
  flex-basis: 50%;
  box-sizing: border-box;
  max-width: 50%;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  margin-bottom: 0.5rem;
}

@media (min-width: 480px) {
  .post-gallery > .gallery-item {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
}

JavaScript

$(function() {
  $('.pswp-gallery a:has(> img)').click(function(e) {
    e.preventDefault();

    var pswpElement = $('.pswp')[0];
    var items = [];

    $('.pswp-gallery a:has(> img)').each(function(e) {
      var size = $(this).data('size').split('x');

      var item = {
        src: $(this).attr('href'),
        w: parseInt(size[0], 10),
        h: parseInt(size[1], 10)
      };

      items.push(item);
    });

    // define options (if needed)
    var options = {
      // optionName: 'option value'
      // for example:
      index: $('.pswp-gallery a:has(> img)').index(this) // start at first slide
    };

    // Initializes and opens PhotoSwipe
    var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
    
    gallery.init();
  });
})