Gridzy.js & Magnific Popup

Gridzy.js can be combined with many lightboxes out there, because usually they can operate side by side without knowing each other. So let’s combine Gridzy.js with Magnific Popup today.

---

Since many years, my first recommendation for lightboxes is always PhotoSwipe, which I have already combined with Gridzy.js in another post. If you’re interested, just take a look to The Royal Association – Gridzy.js & PhotoSwipe.

However, today we look how we can combine Gridzy.js with Magnific Popup.

Start with Gridzy.js

1. Upload the Gridzy files to your server and add them to your website (usually in the head section):

<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>

2. Add the HTML code (anywhere in the body section):

<div class="gridzy">
	<a href="path-to-image-1-big.jpg">
		<img class="gridzyImage" src="path-to-image-1-small.jpg" alt="a random image" />
	</a>
	<a href="path-to-image-2-big.jpg">
		<img class="gridzyImage" src="path-to-image-2-small.jpg" alt="another random image" />
	</a>
	<a href="path-to-image-3-big.jpg">
		<img class="gridzyImage" src="path-to-image-3-small.jpg" alt="yet another random image" />
	</a>
	<a href="path-to-image-4-big.jpg">
		<img class="gridzyImage" src="path-to-image-4-small.jpg" alt="a random image again" />
	</a>
	<a href="path-to-image-5-big.jpg">
		<img class="gridzyImage" src="path-to-image-5-small.jpg" alt="one last random image" />
	</a>
</div>

As you can see, the images are encapsulated in a-tags. Additionally you need to consider these things:

• The href attribute should contain the URL to the large image.
• The CSS class gridzyImage is needed for all img tags.
• The src attribute should contain the URL to the small image.

---

Then add Magnific Popup

First you need to download Magnific Popup from GitHub. Just unpack the ZIP archive and copy the “dist” folder into your project. You can rename the folder from “dist” to “magnific-popup” for example, so you can’t get confused about this folder.

Step 1: include JS and CSS files

Add the following to your website (usually in the head section):

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

Step 2: initialize

Add the following directly before the closing </body>:

<script>

$('.gridzy').magnificPopup({
	gallery: {
		navigateByImgClick: false,
		enabled:true
	},
	delegate: 'a',
	type: 'image',
	zoom: {
		enabled: true
	},
	closeOnContentClick: true, 
	image: {
		titleSrc: function(item) {
			return item.el.attr('title') || item.el.find('.gridzyCaption').text();
		}
	}
});

</script>

That’s it!

The positions where to add the code snippets are only proposals. So, feel free to change the order and positions. You can also put the last code snippet into a JS file for example. The order of the snippets shouldn’t be relevant.

Have fun! ✌😊

Updates:

April 11, 2020
Changed the behavior when the opened image is clicked. Previously it navigated to the next image, now it closes the image.