CMS Lightbox with Multi-Image Field

The native Webflow lightbox component can be quite convenient to use, but it doesn't always play nice with the Webflow CMS. We wrote a tiny and easily-implementable script that combines both components.

Setup

🚀 Lorem ipsum dolor sit amet consectetur. Sed viverra netus ut turpis in amet vel.

Examples

🤯 Lorem ipsum dolor sit amet consectetur. Sed viverra netus ut turpis in amet vel.

FAQs

🤔 Lorem ipsum dolor sit amet consectetur. Sed viverra netus ut turpis in amet vel.

STEP #1

Copy the CMS Lightbox with Multi-Image Field <script> and paste into an html embed

<script const "categories = categories = document.getElementsByClassName('collection-item')
for (var i=0; i<categories.length; i++){
const json_list = categories[i].getElementsByClassName('w-json')
for (var j=0; j<json_list.length; j++){
json_list[j].innerHTML = json_list[j].innerHTML.replace('$',i)
}
} </script>

Copy Script

STEP #2

Instructions:

Create your nested collection with lightboxes, check "link with other lightboxes" and put "$" as the group name. Then, replace "collection-item" in the script with the class name you decided to give your collection item.

Note: Webflow limits this to 5 images in the multi-Image field

Working examples

See this solution working live in this Webflow project.

Example - CMS Lightbox with Multi-Image Field

Frequently Asked Questions

Some questions I know the answer to so far.

Sample Question Text

Sample answer text