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.

GET STARTED
Script
Documentation
Examples
FAQs
STEP #1

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

<!-- CMS Lightbox by MSHK -->
<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

Flower Tea

$3.50
No items found.

Iced Coffee

$3.50
No items found.

Coffee

$3.50
No items found.
A comparison chart showing the use of CMS field to achieve a CMS features section before and after using rich text mapping
Reveal Example: Complex CMS Layout
A comparison chart showing the use of CMS field to achieve a CMS testimonial section before and after using rich text mapping
Reveal Example: Client Testimonials

Frequently Asked Questions

Some questions I know the answer to so far.

Lorem Ipsum?

Lorem ipsum dolor sit amet. Cum totam dolorem ut consectetur reprehenderit aut placeat expedita aut magnam architecto est ipsum atque.

Lorem Ipsum?

Lorem ipsum dolor sit amet. Cum totam dolorem ut consectetur reprehenderit aut placeat expedita aut magnam architecto est ipsum atque.

Lorem Ipsum?

Lorem ipsum dolor sit amet. Cum totam dolorem ut consectetur reprehenderit aut placeat expedita aut magnam architecto est ipsum atque.

Lorem Ipsum?

Lorem ipsum dolor sit amet. Cum totam dolorem ut consectetur reprehenderit aut placeat expedita aut magnam architecto est ipsum atque.

Lorem Ipsum?

Lorem ipsum dolor sit amet. Cum totam dolorem ut consectetur reprehenderit aut placeat expedita aut magnam architecto est ipsum atque.

Lorem Ipsum?

Lorem ipsum dolor sit amet. Cum totam dolorem ut consectetur reprehenderit aut placeat expedita aut magnam architecto est ipsum atque.

Lorem Ipsum?

Lorem ipsum dolor sit amet. Cum totam dolorem ut consectetur reprehenderit aut placeat expedita aut magnam architecto est ipsum atque.

Can I hire you to implement this for me?

Sure, please email me at angus@mediastudio.space

Made in Webflow