June 2, 2024
Updated!

Dynamic Gallery in Webflow using CMS Multi-Image Fields

Webflow
CMS
JavaScript

Introduction

In this tutorial, I'll guide you through the process of building an interactive dynamic gallery using Webflow's CMS multi-image field feature. By the end of this tutorial, you'll have a visually appealing gallery where users can navigate through multiple images seamlessly.

Step 1: Setting Up Your Collection

CMS Collection Setup

Begin by creating a collection in Webflow with a multi-image field. For example, let's say you have a collection named "Recipes" with a gallery of images for each recipe.

Step 2: Addressing Lightbox Issues

If you try to use the lightbox component directly within a collection list linked to the multi-image field, you might face a problem. Each collection item ends up with a separate lightbox containing only one image. To resolve this, group all the lightboxes by assigning them a common group name. This ensures that all images are displayed together in the lightbox.

Assigning a Group name to the Lightbox

Step 3: Designing Your Gallery Layout

Style the list as a grid with 2 columns and add an overlay with "(+n)" indicating the number of additional images beyond the third one.

Feel free to utilize the CSS provided to style the grid, or if you prefer, you can create a different custom style 🎨

    /* gallery styles */

    .gallery-list> :nth-child(1) {
        grid-row: span 2;
        height: 100%;
    }

    .gallery-list> :nth-child(2) {
        grid-row: auto;
    }

    .gallery-list> :nth-child(3) {
        grid-row: auto;
    }

    .gallery-list> :nth-child(4) {
        display: none;
    }

    .creation-list> :not(:first-child) {
        display: none;
    }

    .gallery-list> :not(:nth-child(3)) .overlay {
        display: none;
    }



    @media only screen and (max-width: 768px) {
        .gallery-list> :nth-child(1) {
            grid-row: auto;
            grid-column: span 2;
        }
    }

Step 4: Enabling Lightbox Functionality

To ensure that clicking on images in the gallery opens the lightbox, use the following JavaScript code:

var lightboxElements = document.querySelectorAll('.lightbox-ele');
var imgCount = lightboxElements.length;
var imgOverlay = document.querySelector('.gallery-list .image-ele:nth-child(3) .image-wrapper .overlay');

if (imgCount > 3) {
    imgOverlay.style.display = 'flex';
    imgOverlay.children[0].textContent = `+${imgCount - 3}`;
}

else {
    imgOverlay.style.display = 'none';
}

document.querySelectorAll('.image-wrapper').forEach(imageWrapper => {
    imageWrapper.addEventListener('click', () => {
        const sibling = imageWrapper.nextElementSibling;
        if (sibling?.classList.contains('lightbox-ele')) {
            sibling.click();
        }
    });
});

This code is for a gallery of images. If there are more than 3 images, it shows an overlay on the third image indicating how many additional images there are. it also enables clicking on an image to trigger a click on the next sibling, which is the lightbox element 😀

Happy designing! 🌄

Introduction

In this tutorial, I'll guide you through the process of building an interactive dynamic gallery using Webflow's CMS multi-image field feature. By the end of this tutorial, you'll have a visually appealing gallery where users can navigate through multiple images seamlessly.

Step 1: Setting Up Your Collection

Begin by creating a collection in Webflow with a multi-image field. For example, let's say you have a collection named "Recipes" with a gallery of images for each recipe.

Step 2: Addressing Lightbox Issues

If you try to use the lightbox component directly within a collection list linked to the multi-image field, you might face a problem. Each collection item ends up with a separate lightbox containing only one image. To resolve this, group all the lightboxes by assigning them a common group name. This ensures that all images are displayed together in the lightbox.

Step 3: Designing Your Gallery Layout

To achieve the desired gallery layout, create a separate collection list for the gallery. Limit the items displayed to 3. Style the list as a grid with 2 columns and add an overlay with "(+n)" indicating the number of additional images beyond the third one.

Use the following JavaScript code to modify the layout:

// Make the first image span 2 columns
var firstImg = document.querySelector(".gallery-list > div:nth-child(1)")
firstImg.style.gridArea = 'span 1/span 2/span 1/span 2';

// Hide overlay for items in the gallery, except for the third one if there are more than 3 images
var imgCount = document.querySelector('.lightbox-list').childElementCount
if (imgCount > 3) {
    var imgOverlay = document.querySelector('.gallery-list').children[2].children[0].children[1];
    imgOverlay.style.display = 'flex';
    imgOverlay.children[0].textContent = `+${imgCount - 3}`;
}

Step 3: Designing Your Gallery Layout

To ensure that clicking on images in the gallery opens the lightbox, use the following JavaScript code:

const imageWrappers = document.querySelectorAll('.image-wrapper');

for (let i = 0; i < imageWrappers.length; i++) {
    const imageWrapper = imageWrappers[i];
    const order = i + 1;

    imageWrapper.addEventListener('click', () => {
        console.log(`Image wrapper clicked! Order: ${order}`);
        document.querySelector(`.lightbox-list > div:nth-child(${order}) > a`).click()
    });
}

This code creates an array of gallery images and triggers a click event on the corresponding lightbox item when a gallery image is clicked. This way, users can seamlessly navigate through the images in the lightbox.

Conclusion

By following these steps and implementing the provided code snippets, you can create a dynamic and interactive image gallery in Webflow using CMS multi-image fields. This approach enhances user experience by allowing smooth navigation through multiple images within a cohesive lightbox environment.

Happy designing!

Get Cloneable Demo
logo in footer
Copyrights 2024 © Abdelhalim Aljamal - All rights reserved.
Close
logo in navbar
Code copied to clipboard!