CMS Lightbox Galleries

1. First thing we can to do is simply link Magnific Popups stylesheet.

Copy the code below and paste it in Custom Code section "Inside <head> tag"

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"/>

2. Next thing we have to do is link to the Magnific Popup Javascript library using a CDN to make it easy.

Copy the code below and paste it in Custom Code section "Before </body> tag"

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

3. Lastly, all we have to do is copy and paste the script below to initiate the Light-box. Simply paste this script right underneath the code we copied above.

Copy the code below and paste it in Custom Code section "Before </body> tag"

<script>
$('.video').magnificPopup({
	type: 'iframe'        
});
</script>

That's it! Literally! 🤙🏼
That's all the code it takes to make the video light-box work with CMS.

Where it says ".video", that's the class that the script is referencing to use the light-box. You can change that to whatever you'd like and use that class to initiate the pop-up for that element.

NOTE: The plugin needs a link to reference the source of the media to work. So if it's a video, use the "Link Block" element and tie the CMS with the video URL as show below.

‍

You can see it is grabbing the source (URL) from a CMS collection.

You can also see the class for that link block is "video" which you can obviously use whatever you want.

I am also pulling the background image from the same CMS collection.

‍

The light-box (Magnific Popup) is initiated by writing the code below.

<script>$('.your-class').magnificPopup({});</script>

We need to initiate a new instance for every gallery we have on the site. For this page it looks like this:

<script>
$('.video').magnificPopup({
	type: 'iframe'        
});

$('.skate-img').magnificPopup({
	type: 'image',
	gallery: {
		enabled: true
	}
});
</script>

SPECIFY TYPE
Now all we have to do is specify the type of gallery or media it is. For video it would be an "iframe". For photos it would be "image". To do this we break up the curly brackets "{ }" and write this in between:

type: 'iframe'

CREATE GALLERY
To turn any pop-up into a gallery all you have to do is add the code below under the code from above between those curly brackets. It's going to make any of the elements that have that same class into one gallery.

gallery: {
	enabled: true
}

Setting up the image gallery was a bit more tricky and requires the "embed code" element. Here's why, Magnific Popup needs a link src or href to call the image. For some reason when we use the Image Element within or not in a collection list it doesn't seem to use an href to pull the image. It's doing it another way or simply just providing the "src" link. But with the Embed Code element we can specify the src and the href which will be the same dynamic option as show in the image below.

<img class="image-class" src="dynamic-image-link" href="dynamic-image-link">

I suggest browsing the Designer to see how I set up the collection list for the embed code to get the photos to work. I wanted them as squares and so you can see the image looks stretched in the designer but to fix that I added one line of CSS code as show below. This makes the images fit proportionally while filling the entire space.

<style>
.skate-img {
	object-fit: cover;
}
</style>

Lightbox

CMS Photo Gallery

Getting Started