Webflow Lightbox Element


Display Captions in Webflow’s Lightboxes

View the Cloneable Site in Webflow

Works with CMS-stored images, thumbnails, and captions. Does not support captioning video, due some complexities matching captions to the currently displayed video.
This is likely a temporary solution, as Webflow intends to building captioning support into Memberships natively.

This feature allows you to display a caption inside of Webflow’s lightboxes, which is automatically pulled from the CMS.

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.

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/webflow-util@4.11/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/webflow-util@4.11/src/nocode/webflow-elements.js"></script>

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

See above for details.