How can I connect a CMS multi-image field with a lightbox in Webflow, specifically for creating separate "before" and "after" lightbox galleries using filters?
TL;DR
- Create two CMS multi-image fields (one for before, one for after) and bind each to separate Collection Lists.
- Add Lightbox components within each list, bind them to the respective images, and assign unique Lightbox group names to keep galleries separate.
You want to connect CMS multi-image fields to separate lightbox galleries—one for "before" and another for "after" images—in Webflow, while maintaining them as distinct groups. Since Webflow doesn't natively support grouping multi-images into filtered lightboxes, it requires a workaround.
1. Use Two Multi-Image Fields in CMS
- In your CMS Collection, create two separate Multi-Image fields: one for Before Images and another for After Images.
- This allows you to manage and display the two sets independently.
2. Add Two Collection Lists on the Page
- Inside your CMS Template Page or a Collection List Wrapper, add two Collection List elements.
- Bind the first to the “Before Images” field, and the second one to the “After Images” field.
- These will render each image from the associated field.
3. Connect Each Image to a Lightbox Component
- Inside each Collection List, drag in a Lightbox component instead of a regular image.
- Bind the Lightbox image to the current image from the multi-image field.
- Under Lightbox Settings, give each group a unique name (e.g., one group named
before-gallery, the otherafter-gallery). - This tells Webflow to open images in separate lightbox sets.
4. Optional: Use Custom Attributes for Filtering (Visual Control)
- To show or hide "before" or "after" galleries visually (for example, with buttons), use custom interactions or filters with Webflow's
CMS filtersupport or tools like Jetboost. - Alternatively, set custom
data-filterattributes on wrapper divs for possible JavaScript control.
5. Publish and Test Each Gallery
- Preview or publish the site to test that:
- Clicking one "before" image opens only the before gallery.
- Clicking an "after" image opens only the after gallery.
- Users can scroll through images within each respective lightbox set.
Summary
To create separate before/after lightbox galleries from CMS multi-images in Webflow, use two Multi-Image fields, bind them in separate Collection Lists, and assign each Lightbox Group a unique name. This keeps the lightboxes distinct while staying fully CMS-powered.