Lightbox Galleries

WebflowNoah Raskin



Watching this Video will take Approximately: 


Reading this lesson will take approximately: 


The Original Source of this content may include additional useful information or context, and will likely contain links to any content, templates or resources mentioned by the narrator. You can find visit the source below:

Lessons Overview

Lesson Content:

Lightbox Galleries

Initial Lightbox

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"</head>

<link rel="stylesheet" type="text/css" href="">

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 tag"

<script type="text/javascript" src=""></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 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.


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>


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'


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}

Photo Lightbox

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.

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>

Tools used in this Tutorial