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

TL;DR

Create a CMS Collection and connect it to a Collection List with thumbnails and metadata.
Build a hidden lightbox container on the page and populate it using custom data attributes and JavaScript triggered on thumbnail clicks.
Use Webflow interactions to show/hide the lightbox and ensure mobile responsiveness and accessibility.

To create a custom lightbox with dynamic content in Webflow, you must combine Webflow CMS with interactions to simulate standard lightbox behavior using dynamic CMS fields.

1. Prepare the CMS Collection

Create a CMS Collection that includes the content you want to display. Typical fields are:
Image or Video URL
Title
Description or other metadata

2. Design the Collection List

Add a Collection List to your page and connect it to your desired CMS Collection.
Inside the Collection List, place elements such as:
Thumbnail Image
Text summaries

3. Create the Custom Lightbox Element

Somewhere on the page (ideally outside the Collection List), create a div (e.g., "Lightbox Wrapper") that will act as your lightbox container.
Inside it, create:
Image or Video elements (use bindings to dynamic values with custom code)
Text fields for title/description
Close button
Set the Lightbox Wrapper to display: none by default, then use interactions to display it dynamically.

4. Add Unique Identifiers or Attributes

On each Collection Item, add custom attributes (e.g., using data- attributes via the Settings panel) to temporarily hold CMS values like:
data-img for image URLs
data-title for titles
data-desc for descriptions

5. Add Custom Code for Dynamic Loading

Use custom JavaScript within the Page Settings → Before </body> tag section to capture click events and populate the lightbox. For example:
On click of a thumbnail, read the data- values.
Set content inside your lightbox container.
Change display property to flex or block.

Note: Webflow doesn’t support dynamic binding into hidden modals/lightboxes natively. Custom code is required to inject dynamic CMS content into the lightbox.

6. Use Interactions to Show/Hide the Lightbox

Create an interaction that:
Shows the Lightbox Wrapper using a display: flex or block
Adds a fade-in animation or transition
On the Close button, create an interaction to hide the wrapper and reset content if needed.

7. Optimize for Responsiveness and Accessibility

Ensure your lightbox is mobile-friendly with proper flex settings.
Add ARIA labels or use semantic HTML for accessibility improvements.

Summary

To create a custom lightbox with dynamic CMS content in Webflow, build a CMS-powered Collection List, design a hidden lightbox container, use custom attributes and JavaScript to load content dynamically, and apply Webflow interactions to handle show/hide behavior.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer