How to show an image in a pop-up window

If you need to add a modal window (pop-up) to show an image in on a Page or Blog post, try this very simple method:

Result:

How to

1

Add Javascript code

Starting on a new line, add the following code to the very bottom of the file:

  $(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

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

2

Add a link on your Page or Blog post

The format to add a pop-up link is:

<a class="image-link" href="your-image-url">Open popup</a>

Replace your-image-url with an actual image URL. Example:

https://cdn.shopify.com/s/files/1/2018/8867/files/matteo-paganelli-39971_530x.jpg

Replace Open popup with the link text you'd like to use.

Here's a true example:

<a class="image-link" href="https://cdn.shopify.com/s/files/1/2018/8867/files/matteo-paganelli-39971_530x.jpg">Open popup</a>

You can add as many links as you like, make sure you use the class " image-link" in order for the pop-up/modal to work.

Notes:

Use the code icon to insert your code on Pages and Blog posts:

Use this link to help you get your site's image URL's:

myshopify.com/admin/settings/files

To show a thumbnail image instead of "Open popup", you can use something like this:

<a class="image-link" href="https://cdn.shopify.com/s/files/1/2018/8867/files/matteo-paganelli-39971_800x.jpg"><img src="https://cdn.shopify.com/s/files/1/2018/8867/files/matteo-paganelli-39971_200x.jpg"></a>

Result:

Additional Customization

Pipeline uses Magnific popup. The code you add to shop.js is to initialize the popup based on a link class. You can use more advanced techniques if required:

http://dimsemenov.com/plugins/magnific-popup/documentation.html

Advanced

This code will make all images on your blog pages zoom into a modal window upon click. No additional links required or knowledge of image filename. 

$(document).ready(function() {
  $('.template-article img').each(function() {
      var currentImage = $(this);
      currentImage.wrap("<a class='image-link' href='" + currentImage.attr("src") + "'</a>");
  });
  $('.image-link').magnificPopup({type:'image'});  
});