Broadcast Image Gallery

<div id="shopify-section-press" class="shopify-section">
<div class="product-grid product-grid--horizontally">
<!-- image 1 -->
<div class="small--one-whole medium--one-half medium-up--one-quarter"><img src="//cdn.shopify.com/s/files/1/1585/2123/files/Screen-Shot-2018-04-27-at-7.04.50-AM_2048x2048.png?v=1526421296" alt="Image 1" title="Press image one" /></div>
<!-- image 2 -->
<div class="small--one-whole medium--one-half medium-up--one-quarter"><img src="//cdn.shopify.com/s/files/1/1585/2123/files/look6-2_MAIN_909389c8-e8fb-4ba6-9061-26f8c99ac90a_2048x2048.jpg?v=1526420548" alt="Image 2" title="press image two" /></div>
<!-- image 3 -->
<div class="small--one-whole medium--one-half medium-up--one-quarter"><img src="//cdn.shopify.com/s/files/1/1585/2123/files/Screen_Shot_2018-04-22_at_8.38.27_PM_copy_2048x2048.png?v=1526420476" title="press example image three" /></div>
<!-- image 4 -->
<div class="small--one-whole medium--one-half medium-up--one-quarter"><img src="//cdn.shopify.com/s/files/1/1585/2123/files/DP111_2048x2048.jpg?v=1526421154" title="press example image four" /></div>
<!-- image 5 -->
<div class="small--one-whole medium--one-half medium-up--one-quarter"><img src="//cdn.shopify.com/s/files/1/1585/2123/files/katie_jane_hughes_concealer_hack_2_2048x2048.jpg?v=1526421788" title="press example image five" /></div>
<!-- image 6 -->
<div class="small--one-whole medium--one-half medium-up--one-quarter"><img src="//cdn.shopify.com/s/files/1/1585/2123/files/gina-cover-700_1_2048x2048.jpg?v=1506102318" title="press example image six" /></div>
<!-- image 7 -->
<div class="small--one-whole medium--one-half medium-up--one-quarter"><img src="//cdn.shopify.com/s/files/1/1585/2123/files/katie_jane_hughes_concealer_hack_2_2048x2048.jpg?v=1526421788" title="press example image seven" /></div>
<!-- image 8 -->
<div class="small--one-whole medium--one-half medium-up--one-quarter"><img src="//cdn.shopify.com/s/files/1/1585/2123/files/gina-cover-700_1_2048x2048.jpg?v=1506102318" title="press example image eight" /></div>

</div>
<!-- close grid -->
</div>
<!-- close section -->

Javascript

/* -- code for image gallery pop-up -- */
// add to the very bottom of theme's javascript file
$(document).ready(function() {
  $('#shopify-section-press img').each(function() {
      var currentImage = $(this);
      currentImage.wrap("<a class='image-link' title='" + currentImage.attr("title") + "' href='" + currentImage.attr("src") + "'</a>");
  });

  $('.image-link').magnificPopup({
      type: 'image',
      titleSrc: function(item) {
        return item.el.attr('title');
      },    
      gallery: {
        enabled: true, 
        preload: [0,2],
        navigateByImgClick: true,
        arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
        tPrev: 'Previous (Left arrow key)', 
        tNext: 'Next (Right arrow key)', 
        tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
      },    
      mainClass: 'mfp-with-zoom', 
      zoom: {
        enabled: true, 
        duration: 300, 
        easing: 'ease-in-out', 
        opener: function(openerElement) {
        return openerElement.is('img') ? openerElement : openerElement.find('img');
      }
    }
  });  
});
/* - end - */