CMS & Lightbox + Captions
Display CMS-Managed Captions in Webflow’s Lightboxes
This feature allows you to display a caption inside of Webflow’s lightboxes, which is automatically pulled from the CMS.
Works with CMS-stored images, thumbnails, and captions. Does not support captioning video, due some complexities matching captions to the currently displayed video.
CMS Lightbox + Captions - Webflow
CMS Lightbox + Captions
Cloneable demo site.
- Include a photo in your collection items
- Include a plain text, single-line caption
- Setup your Collection List
- Add your Lightbox Element
- Data bind it, as usual, to the thumb and main images you want
- Also set Alt Text to the plain text caption you want
Add the
wfu-lightbox-captions custom attribute (no value needed) to the Lightbox Link, which is the outermost lightbox element.That's it!
The CMS field you've bound to Alt Text will be displayed as the caption in lightbox view.
There are currently no configuration options for this library, so we’ll use a no-code integration approach.
Add this CSS script to the HEAD of your site or page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-elements.css">
Add this JS reference to the BODY of your site or page.
<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/nocode/webflow-elements.js"></script>
See above for details.
Webflow Lightbox Element
Sygnal Webflow Utils
Legacy docs