Dynamically Generating Lightboxes

It's also possible to generate Webflow's lightboxes with custom code.

Reasons you might want to do this;

• To pull images from another server
• To dynamically add/remove content from your lightbox view

How Webflow's Lightboxes Work

The basic information regarding the lightbox trigger and content is written into the HTML of your page, using the Lightbox element.

When the page runs, webflow.js detects and assembles the lightbox UX, and readies it for use.

We're going to use the same mechanics, but give us the ability to adapt it to our own needs;

• To add / remove / change the lightbox items after the page has loaded
• To affect the lightbox in various ways
• Possibly, custom triggers

Lightbox HTML structure

A Webflow lightbox link typically contains three parts;

• The trigger link, which is the outer <a> element with the w-lightbox class.
• A thumbnail image, button, or other content which indicates what will be displayed in the lightbox.
• A chunk of JSON with the class w-json which defines the items that will be loaded into the lightbox.

Here's a fairly minimal example, with the item abbreviated to the bare necessities;

<a href="#" class="lightbox-link w-inline-block w-lightbox"><img src="https://cdn.prod.website-files.com/66a47c32e66a77a3c128e282/66a47ce64421398ae9c33fea_annual%20skin%20check.png" loading="lazy" alt=""><script type="application/json" class="w-json">{
  "items": [
    {
      "_id": "66a47ce64421398ae9c33fea",
      "url": "https://cdn.prod.website-files.com/66a47c32e66a77a3c128e282/66a47ce64421398ae9c33fea_annual%20skin%20check.png",
      "type": "image"
    }
  ],
  "group": "group"
}</script></a>

Important, I've not fully tested the _id . It may need to be unique in order for the lightbox to properly trigger the correct slide, or it may be unimportant. Experiment to see what works best for you.

Notes

A lightbox link can specify zero or more items in the JSON.

• Zero items is useful if you simply want to trigger the lightbox group. The first item will be selected.
• One item is typical.
• Multiple items is common if you bind the media of the lightbox element to multi-image field.

For reference, this is a typical, complete lightbox with all JSON fields included;

<a href="#" class="lightbox-link w-inline-block w-lightbox"><img src="https://cdn.prod.website-files.com/66a47c32e66a77a3c128e282/66a47ce64421398ae9c33fea_annual%20skin%20check.png" loading="lazy" alt=""><script type="application/json" class="w-json">{
  "items": [
    {
      "_id": "66a47ce64421398ae9c33fea",
      "origFileName": "annual skin check.png",
      "fileName": "annual skin check.png",
      "fileSize": 1311062,
      "height": 1024,
      "url": "https://cdn.prod.website-files.com/66a47c32e66a77a3c128e282/66a47ce64421398ae9c33fea_annual%20skin%20check.png",
      "width": 1024,
      "type": "image"
    }
  ],
  "group": "group"
}</script></a>

Dynamic lightboxes

Essentially you can add, remove or change your lightboxes freely by changing the JSON, and then re-initializing the Webflow lightbox.

That is performed with;

Webflow.require("lightbox").ready();

Notes

Captions

Captions may work as well, try adding a caption item to your JSON at the item level.

Video

Videos work differently and will require some experimentation. In general, they work as a JSON-encoded chunk of HTML in the form of an <iframe> element.