How can I create a custom lightbox with dynamic content in Webflow?

TL;DR

Create a CMS Collection with relevant fields and display items using a Collection List.
Build a hidden lightbox structure outside the list, including overlay, content area, and close button.
Pass dynamic content using custom attributes (data-*) on clickable elements.
Use Webflow interactions and JavaScript to open the lightbox, populate it with CMS data, and enable closing functionality.

To create a custom lightbox with dynamic content in Webflow, you'll need to combine CMS Collections, interactions, and some basic structure. Here's how to do it step by step.

1. Set Up Your CMS Collection

Create a Collection for the content that will populate your lightbox (e.g., portfolio items, products, team members).
Add necessary fields like: Image, Title, Description, and any others you want to display in the lightbox.

2. Build the CMS Item Layout

Drag a Collection List into your page and connect it to your CMS Collection.
Inside each Collection Item, add a thumbnail image, title, or button that will trigger the lightbox.
Style your items as needed.

Outside the Collection List, create a div that acts as the lightbox overlay. This should include:
A background overlay (position: fixed, 100% width/height, hidden by default).
A content container to display dynamic fields like image, title, and description.
A close button.
Give this div a class like custom-lightbox and set its initial display to ‘none’.

Webflow doesn’t allow direct dynamic content inside the standalone lightbox component, so:

Use custom attributes to pass CMS data from the Collection Item to the custom lightbox. For example, add attributes to the clickable element like:
data-title = [Title]
data-description = [Description]
data-image = [Image URL]

(Use a Custom Attribute field in the Element Settings panel to insert these values dynamically with Add Field.)

Add a Click Trigger on the clickable element within the Collection Item.
Create a Webflow interaction to:
Set the custom-lightbox display to flex or block.
Add an animation for fade in or scale in, if desired.
Within this interaction, use Webflow’s custom code embed or small JavaScript to:
Pull data-* attributes from the clicked element.
Populate the content in the lightbox.

Example JavaScript (add inside a custom code block or in Page Settings > Footer):

document.querySelectorAll('.thumbnail-trigger').forEach(item => {  item.addEventListener('click', function() {    const title = this.dataset.title;    const desc = this.dataset.description;    const img = this.dataset.image;        document.querySelector('.lightbox-title').textContent = title;    document.querySelector('.lightbox-desc').textContent = desc;    document.querySelector('.lightbox-img').src = img;  });});

6. Add Close Interaction

Add a Click Trigger to the close button or background overlay to:
Set the custom-lightbox display back to none.
Optionally, animate it out.

Summary

To create a custom dynamic lightbox in Webflow, use a CMS Collection for your content, build a hidden lightbox component on the page, pass dynamic values via data-* attributes, and use Webflow interactions and simple JavaScript to populate and control the lightbox. This approach gives you full design flexibility beyond the limitations of Webflow’s native lightbox component.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer