Super Lightbox Gallery for Webflow

Display 300+ images in your Webflow Ligthbox element

why you need it

Super Lightbox

Currently, Webflow’s native lightbox gallery functionality can feel quite limited, especially when you need to display a large number of images.

If you’re working with 10 to 50 images, the process can become tedious and time-consuming, often requiring you to upload images one at a time.

With FlowBuddy, we’ve created a solution that makes setting up a lightbox gallery effortless, scalable, and capable of handling even the largest collections of images.

Our guide simplifies the process of creating a lightbox gallery that can display 100+ images—or even up to 300 images—without the hassle of manual uploads. Say goodbye to the frustration of adding images one by one and hello to a streamlined workflow.

Our script scans the page, moves the lightbox contents into 1 single gallery.

Installation

LIVE EXAMPLE

Check out the live example

Take look at a live working example here with 74 images- https://www.dektonsurfaces.co.uk/gallery/dekton-kitchen-gallery

Take look at a live working example here with 74 images

INSTALLATION

Check out the installation process.

Don’t hesitate to reach out if you have any questions.

Step 1
Step 2

2 Click on the cog icon for the CMS Collection to edit its fields. Since we’re creating an image gallery, you’ll need to add the Multi-Image Field.

Add as many of these fields as your plan allows, with each field supporting 25 images max. In my guide, I’ve set up 10 Multi Image Fields, enabling a total of 250 images that can be uploaded.
Step 3

3 Create one CMS item for each gallery category. This step is essential and also beneficial for SEO. After setting up your gallery categories, go into each one and upload your images to the Multi Image Fields. Remember to add an Image ALT description for every image to ensure accessibility and SEO optimisation.
Step 4

4 Navigate to the CMS page in Design View and begin designing your page by adding your header, footer, and main content section in preparation for the Super Lightbox Gallery.

Once your layout is ready, add one parent div element to contain all your image galleries. Inside this, add another child div element to house the individual Multi Image fields., just like the below image.

Note: You can rename these elements anything you prefer.
Step 5

5 or each of the div elements that will contain the Multi-Image gallery, configure the conditional visibility settings so they only appear if the corresponding CMS Multi-Image field has been populated. This ensures your page remains clean and organised, displaying only the relevant content.
Step 6

6 Add a CMS Collection Lists inside each of the gallery housing div elements. Within these CMS Collection Lists, add a Lightbox element.

Inside the Lightbox element, add an image element and a div element. This will create a structured layout like in the image below. You’re free to rename the elements or classes to suit your preferences.

Step 7

7 Map each of the CMS Collections, and subsequently the Lightbox element to to their CMS fields. Like in the example below.

Element	Settings
Collection List element	Collection List Settings > Source = Gallery Field 1
Image element	Collection Link Settings > Media = Gallery Field 1
Div element	Lightbox Link Settings > Media = Gallery Field 1

‍

Repeat this process for all the CMS Collection Lists, image and div elements for the page, and insure each is mapped to their matching CMS fields.

Element	Settings
Collection List element 2	Collection List Settings > Source = Gallery Field 2
Image element 2	Collection Link Settings > Media = Gallery Field 2
Div element 2	Lightbox Link Settings > Media = Gallery Field 2

‍

Essentially, on your page, you will have 1 to 10 Collection Lists, with 1-10 Lightbox elements, with 1-10 image and div elements.

Step 8

Step 9

9 Now at this stage, you will be familiar with the CMS Collection Lists, Lightbox element, image and div elements on your gallery page. The next bit is to add attributes for these elements. If wrong, your gallery will not function.

Element	Attributes
Collection List Item (not wrapper, not list)	Name = flowbuddyValue = superlightbox-list
Image element	Name = flowbuddyValue = superlightbox-dynamic
Div element	Name = flowbuddyValue = superlightbox-image

Step 10

THE CODE

ADD THE fINSWEET CMS COMBINE ATTRIBUTE SCRIPT. yOU WILL NEED THIS REGARDLESS IF YOU USE OUR MINIFIED OR FULL JAVASCRIPT CODE

1<!-- FINSWEET CMS COMBINE -->
2<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmscombine@1/cmscombine.js"></script>
3<!-- END FINSWEET CMS COMBINE -->

.JS

minified Javascript .js file

1<!-- FLOWBUDDY SUPER LIGHTBOX --> 
2<script async src="https://flowbuddy.co.uk/widget/scripts/superlightbox/superlightbox.js"></script>
3<!-- END FLOWBUDDY SUPER LIGHTBOX -->

.JS

Javascript

1<!-- FLOWBUDDY SUPER LIGHTBOX (JAVASCRIPT) -->
2<script>
3(function() {
4    'use strict';
5    
6    // Configuration
7    const CONFIG = {
8        itemsPerPage: 12, // Number of images to load per batch
9        loadMoreText: 'Load More Images',
10        loadingText: 'Loading...',
11        noMoreText: 'No more images',
12        loadMoreButtonClass: 'flowbuddy-load-more-btn',
13        containerClass: 'flowbuddy-lightbox-container'
14    };
15    
16    let currentPage = 0;
17    let allDynamicImages = [];
18    let isLoading = false;
19    
20    // Function to create load more button
21    function createLoadMoreButton() {
22        const button = document.createElement('button');
23        button.className = CONFIG.loadMoreButtonClass;
24        button.textContent = CONFIG.loadMoreText;
25        button.style.cssText = `
26            display: block;
27            margin: 20px auto;
28            padding: 12px 24px;
29            background: #007bff;
30            color: white;
31            border: none;
32            border-radius: 4px;
33            cursor: pointer;
34            font-size: 16px;
35            transition: background 0.3s ease;
36        `;
37        
38        button.addEventListener('mouseover', () => {
39            button.style.background = '#0056b3';
40        });
41        
42        button.addEventListener('mouseout', () => {
43            button.style.background = '#007bff';
44        });
45        
46        button.addEventListener('click', loadMoreImages);
47        return button;
48    }
49    
50    // Function to process a batch of images
51    function processBatch(images) {
52        images.forEach(image => {
53            // Get the image URL and alt tag
54            const imageUrl = image.src;
55            const altTag = image.getAttribute('alt');
56
57            // Find the corresponding element with flowbuddy="superlightbox-image"
58            const lightboxImage = image.closest('[flowbuddy="superlightbox-list"]').querySelector('[flowbuddy="superlightbox-image"]');
59
60            // Check if the lightboxImage exists
61            if (lightboxImage) {
62                lightboxImage.style.backgroundImage = `url(${imageUrl})`;
63                lightboxImage.setAttribute('aria-label', altTag);
64                
65                // Show the lightbox item with a fade-in effect
66                const listItem = image.closest('[flowbuddy="superlightbox-list"]');
67                if (listItem) {
68                    listItem.style.opacity = '0';
69                    listItem.style.display = 'block';
70                    requestAnimationFrame(() => {
71                        listItem.style.transition = 'opacity 0.3s ease';
72                        listItem.style.opacity = '1';
73                    });
74                }
75            }
76
77            // Remove the dynamic image element from the DOM
78            image.remove();
79        });
80    }
81    
82    // Function to load more images
83    function loadMoreImages() {
84        if (isLoading) return;
85        
86        isLoading = true;
87        const button = document.querySelector(`.${CONFIG.loadMoreButtonClass}`);
88        
89        if (button) {
90            button.textContent = CONFIG.loadingText;
91            button.disabled = true;
92        }
93        
94        // Simulate a small delay for better UX (optional)
95        setTimeout(() => {
96            const startIndex = currentPage * CONFIG.itemsPerPage;
97            const endIndex = startIndex + CONFIG.itemsPerPage;
98            const batch = allDynamicImages.slice(startIndex, endIndex);
99            
100            if (batch.length > 0) {
101                processBatch(batch);
102                currentPage++;
103            }
104            
105            // Update button state
106            if (button) {
107                const remainingImages = allDynamicImages.length - (currentPage * CONFIG.itemsPerPage);
108                
109                if (remainingImages <= 0) {
110                    button.textContent = CONFIG.noMoreText;
111                    button.disabled = true;
112                    button.style.background = '#6c757d';
113                } else {
114                    button.textContent = CONFIG.loadMoreText;
115                    button.disabled = false;
116                }
117            }
118            
119            isLoading = false;
120        }, 100);
121    }
122    
123    // Function to initialize the paginated lightbox
124    function initPaginatedLightbox() {
125        // Select all elements with the attribute flowbuddy="superlightbox-dynamic"
126        allDynamicImages = Array.from(document.querySelectorAll('[flowbuddy="superlightbox-dynamic"]'));
127        
128        if (allDynamicImages.length === 0) {
129            console.log('FlowBuddy SuperLightbox: No dynamic images found');
130            return;
131        }
132        
133        // Hide all lightbox items initially
134        const allLightboxItems = document.querySelectorAll('[flowbuddy="superlightbox-list"]');
135        allLightboxItems.forEach(item => {
136            item.style.display = 'none';
137        });
138        
139        // Load the first batch
140        loadMoreImages();
141        
142        // Add load more button if there are more images
143        if (allDynamicImages.length > CONFIG.itemsPerPage) {
144            const container = findBestContainer();
145            if (container) {
146                const loadMoreButton = createLoadMoreButton();
147                container.appendChild(loadMoreButton);
148            }
149        }
150        
151        console.log(`FlowBuddy SuperLightbox: Initialized with ${allDynamicImages.length} images, showing ${CONFIG.itemsPerPage} per page`);
152    }
153    
154    // Function to find the best container for the load more button
155    function findBestContainer() {
156        // Try to find a container with the specified class
157        let container = document.querySelector(`.${CONFIG.containerClass}`);
158        
159        // If not found, look for common CMS list containers
160        if (!container) {
161            const possibleContainers = [
162                '[fs-cmscombine-element="list"]',
163                '.w-dyn-list',
164                '[flowbuddy="superlightbox-list"]'
165            ];
166            
167            for (let selector of possibleContainers) {
168                const elements = document.querySelectorAll(selector);
169                if (elements.length > 0) {
170                    container = elements[elements.length - 1].parentElement;
171                    break;
172                }
173            }
174        }
175        
176        // Fallback to body
177        return container || document.body;
178    }
179    
180    // Function to reset pagination (useful for dynamic content updates)
181    function resetPagination() {
182        currentPage = 0;
183        const button = document.querySelector(`.${CONFIG.loadMoreButtonClass}`);
184        if (button) {
185            button.remove();
186        }
187        
188        // Hide all lightbox items
189        const allLightboxItems = document.querySelectorAll('[flowbuddy="superlightbox-list"]');
190        allLightboxItems.forEach(item => {
191            item.style.display = 'none';
192        });
193        
194        initPaginatedLightbox();
195    }
196    
197    // Wait for Finsweet Combine to finish before initializing
198    function waitForCombine() {
199        // Check if Finsweet Combine has finished
200        if (window.fsAttributes && window.fsAttributes.cmscombine) {
201            // Wait a bit more for DOM updates
202            setTimeout(initPaginatedLightbox, 500);
203        } else {
204            // Keep checking
205            setTimeout(waitForCombine, 100);
206        }
207    }
208    
209    // Initialize when DOM is ready
210    if (document.readyState === 'loading') {
211        document.addEventListener('DOMContentLoaded', waitForCombine);
212    } else {
213        waitForCombine();
214    }
215    
216    // Export for manual control
217    window.FlowBuddySuperLightbox = {
218        init: initPaginatedLightbox,
219        loadMore: loadMoreImages,
220        reset: resetPagination,
221        setItemsPerPage: (count) => {
222            CONFIG.itemsPerPage = count;
223        },
224        getConfig: () => CONFIG
225    };
226    
227})();
228</script>
229<!-- END FLOWBUDDY SUPER LIGHTBOX (JAVASCRIPT) -->