Webflow Lightbox hack: Control group slugs via JavaScript

Webflow has a known issue when using Lightbox with dynamic CMS content: when multiple galleries appear on a page, they're often incorrectly grouped into a single Lightbox group. This happens because Webflow doesn't create separate groups for CMS-driven Lightbox elements. In this guide, I show you how to override Lightbox groups dynamically using a simple JavaScript snippet based on the CMS slug. This keeps galleries cleanly separated without manual adjustments for each group. So you can easily display multiple independent Lightbox galleries on a page—efficiently, dynamically, and CMS-powered.

Benefits of this solution:

1. Dynamic gallery separation: With this approach, galleries stay cleanly separated on the page. Each gallery opens independently, significantly improving the user experience.
2. No individual image integration needed! You can continue using Webflow's CMS gallery function with up to 25 images.
3. Easy implementation: The JavaScript code integrates seamlessly into your Webflow project without requiring in-depth programming knowledge.
4. Only one attribute needed for a CMS list.
5. Efficient and CMS-driven: By dynamically adjusting via the CMS, your content stays flexible and easy to manage, while galleries work independently.

With this solution, you can display multiple Lightbox galleries on a page in Webflow while simultaneously improving user-friendliness and flexibility.

‍