Image gallery example

Example:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

1: Create a gallery using grid format

To begin, you'll need to upload all your images here:

https://shopify.com/admin/settings/files

Capture the URL for each one:

Be sure to grab the entire address as only a portion is shown.
Capture all the image addresses to a file so you can refer back to them.

Next, create a new page:

https://shopify.com/admin/pages

Follow this template, get all the code from my template to practice with or use as a demo:

https://gist.github.com/whistlerbrad/37fc29e93f44e7f316078d51e90474fd

When you go to that link, use the Raw button to copy all the code:

The first view allows you to see nicely formatted code.

After you copy that code, paste it in the Code View of your Page. Be sure you're in code view:

Note: When you click on the code view icon, the other toolbar icons will disappear, that's how you know you're in the right mode.

Paste the code only once you're in code view.

Then click that same icon again to toggle back to normal:

Now you'll see the icons again and the first image. Save the page and preview it.

2: Add Javascript for the gallery pop-up effect

Javascript code to add:

/* -- code for image gallery pop-up -- */
$(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 - */

Where do I add the Javascript code:

Use this link to learn where exactly to add this code snippet:

Where to add your Javascript code

Options

Multi-image scrolling

To turn off the multi-image gallery while in the pop-up box modal view, you can adjust the value in the code:

Change from:

    gallery: {
        enabled: true,

to:

    gallery: {
        enabled: false,

Zoom styles

To apply some zoom animation styles, use this CSS code:

/* -- Image gallery zoom and title styles -- */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg { 
  opacity: 0;
}

.mfp-title {
  text-align: center;
  line-height: 18px;
  color: #fff;
  font-weight:600;
  word-wrap: break-word;
  text-transform:uppercase
}
/* - end - */

Where to add style code:

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Image gallery example

Create a gallery using grid format

Add Javascript for the gallery pop-up effect

Options