Links

CMS & Lightbox + Captions

Display CMS-Managed Captions in Webflow’s Lightboxes

Overivew

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.

Demonstration

Usage Notes

Prepare your CMS

  • Include a photo in your collection items
  • Include a plain text, single-line caption

Prepare your Collection List

  • 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

wfu-lightbox-captions attribute

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.

Getting Started ( NOCODE )

STEP 1 - Add the Library

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>

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.

Resources

​
​