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:


How to


Add Javascript code

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

  $(document).ready(function() {

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


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:

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

Here's a true example:

<a class="image-link" href="">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.


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:

These URL's are the full size image. So you may want to use a smaller image by converting:


Notice how I dropped everything after the .jpeg but added _800x before .jpeg (your files might be .png or .jpg)

_800x is the width I want. I could use _640x or _1000x depending on the width I want the image to show. 

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

<a class="image-link" href=""><img src=""></a>


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:


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>");