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.

GET STARTED
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

Title copy goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt sagittis eros. Quisque quis euismod lorem. Etiam sodales ac felis id interdum.

Get Started
Placeholder image
Placeholder image

Title copy goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt sagittis eros. Quisque quis euismod lorem. Etiam sodales ac felis id interdum.

Get Started

Transform your online presence with cutting-edge web design

Our Webflow development team can optimize your website to improve your Google ranking and win you more business.

Start my project now!

Sample feature image for website design, depecting a website on a laptop and phone mockup

Get a robust website with our Webflow development services

Without a well-built custom website, your business will fall behind, giving away free business to your competitors.

Schedule an appointment

Sample feature image/gif for website design, depecting a website on a laptop and phone mockup
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

“Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.”

Placeholder image

Author Name

VP of Company

Calvin Kwok

Eunice Cheung Fine Art
Sample testimonial avatar for calvin

The web designer's work ethic is memorable. They set a very high bar for themselves, and were patient with our requests. That with an excellent execution skills really makes the web development process with Government funding very smooth, thanks a lot!

Dr Cheung

TCM Clinic
Sample testimonial avatar for dr cheung

I thought web design takes a long time, but they really did it within a month 😍 They also provided many web design style and branding options for us to pick, and the backend is super easy to use even for a computer dummy like me 👍🏻👍🏻👍🏻

Tony Chan

Square Fitness
Sample testimonial avatar for tony

Convenient, simple, quickly provided a solution, did not have one face-to-face meeting, and completed the web design project by talking to project managers on the phone only.

Frequently Asked Questions

Some questions I know the answer to so far.

Sample Question Text

Sample answer text

Nice, you've found a secret example!

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