Lightbox JS API

SA5 Slider Code Examples

BETA. This API may change in future releases.

Reset Webflow Lightboxes

When you dynamically create or modify Webflow's lightbox elements, you'll need to reset them.

window.sa5.Sa5Lightbox.resetLightbox(); 

Create a new Lightbox

Creating a new lightbox requires;

• Containing element. In this example, container references a containing element such as a DIV.

• Thumbnail image

• Group name

Provide an image URL and a group name.

window.sa5.Sa5Lightbox.createNew(
  container, 
  `https://picsum.photos/id/238/1000/1000`, 
  "group"
  ); 

By default, the thumbnail image is used as the lightbox media as well.

Future

• Wrap an existing element in a lightbox

• Add multiple media

  • Video support

• Automatic lightbox resettings

• Support for CMS captions and groups

• Events

  • Open / close / swipe