EN IT
Home About Learn Blog

Infinite Looping Webflow Lightbox (Accessible Gallery)

Intermediate 13:09 webflowlightboxcmsaccessibilitycustom-attributes

Upgrade the native Webflow lightbox with infinite looping navigation using one custom attribute — works with CMS or static galleries, on mobile, and stays fully accessible.

Watch on YouTube

Key takeaways

  • The native Webflow lightbox is a dead end — reach the first or last item in a group and you can only go back; infinite looping removes that wall in both directions.
  • Grouping is what ties a gallery together: give every lightbox the same group name and they navigate as one set — and inside a CMS collection every item shares it automatically.
  • The whole enhancement rides on a single custom attribute (data-lightbox-trigger) on the lightbox element; place it inside a collection item and it lands on every generated card at once.
  • The real win isn''t the loop, it''s accessibility — the script keeps the navigation arrows from ever becoming disabled, so keyboard and screen-reader users never get stuck at an edge.
  • The exact same setup works for CMS-driven and static galleries, on desktop and mobile — the logic doesn''t care how the lightboxes were built.

Video chapters

  1. 00:00 Intro
  2. 01:33 Breaking Down the Gallery Structure
  3. 06:40 Adding Infinite Looping to a CMS Lightbox Gallery
  4. 10:16 Testing the Same Setup with a Static Gallery
  5. 11:12 Accessibility Testing
  6. 11:58 Outro

By the end of this lesson you’ll be able to upgrade the native Webflow lightbox with infinite looping navigation — so once someone opens your gallery, they can keep clicking next or previous forever, with no dead ends and no awkward stops. It’s a small fix to one of the more annoying limitations of the native lightbox, and it makes a gallery feel the way a gallery should: smooth and seamless.

By default, once you reach the first or last item in a lightbox group you’re stuck — you can only move back in the opposite direction. That’s a strange wall to hit in something meant to feel continuous. The good news is that the whole enhancement comes down to one custom attribute, and it works with CMS galleries, with static lightbox galleries, on desktop, and on mobile.

The part I care about most, though, is that it stays fully accessible. This isn’t only about a nicer experience for mouse users — it’s about making sure people navigating with a keyboard or assistive technology can move through the entire gallery without ever getting blocked.

How it works

The gallery structure. The starting point is a simple CMS collection — call it Pictures — with just an image field and a plain-text field for each image’s alt text, alongside the default name and slug. Inside the usual section/container/content-wrapper structure sits a collection list bound to that collection. Each collection item holds a native Webflow lightbox element, and inside the lightbox live the image (connected to the CMS image field, with its alt text wired to the alt-text field) and a heading. Binding the alt text to the CMS means every image announces itself properly — accessibility starts here, before any script.

Grouping is the glue. In the lightbox’s element settings, the media is connected to the CMS image field, and every lightbox is assigned the same group name (for example, gallery). Because they all share that name, Webflow ties them into a single lightbox group automatically — that’s what lets you page through the whole set from any starting image. The same idea applies to a static gallery: give each static lightbox the same group name and it behaves identically.

What the script actually does. All the code lives in the page’s Before </body> section. It enhances the native lightbox by adding seamless infinite looping in both directions, but its most important job is accessibility. The script actively monitors the navigation arrows and prevents them from ever becoming disabled — so no one, keyboard or mouse, ever reaches a dead end or loses their place inside the gallery. The experience stays inclusive, smooth, and predictable.

Only one thing to configure. The code is commented throughout if you want to read it, but you really only need to know one thing to make it work: the custom attribute data-lightbox-trigger. It’s the selector the script uses to find every lightbox it should enhance, so it goes directly on the lightbox element. And because the lightbox sits inside a collection item, that attribute is applied to every lightbox in the collection list at once — the setup scales without extra effort. (The card hover effect you may notice in the demo is a separate CSS technique covered in its own lesson; it’s not part of this enhancement.)

How to use it

  1. Clone the project from the Webflow link in the resources below, so you have the working script and structure to start from.
  2. Build (or reuse) your gallery. Put a native lightbox element inside each item — a CMS collection list for a dynamic gallery, or a row of static lightboxes for a fixed one. Connect the lightbox media to your image field (and bind the alt text to a CMS text field so each image is described).
  3. Give every lightbox the same group name (e.g. gallery) so they navigate as one set. For a CMS gallery this is set once on the item’s lightbox; for a static gallery, set the same group on each element.
  4. Add the data-lightbox-trigger attribute to the lightbox element. Inside a collection item it’s applied to every generated card automatically; for static galleries, add it to each lightbox.
  5. Keep the script in place in Before </body> (it comes with the cloneable — no edits needed).
  6. Publish and test. In preview or on the live site, open the gallery and confirm you can keep clicking next or previous forever. Then test the accessibility: use the left and right arrow keys, and press Tab to move focus to a navigation arrow and Enter to keep moving. Everything should loop smoothly, with the arrows never going disabled.

Configuration reference

Attribute Values Default What it does
data-lightbox-trigger any value (used as a selector hook) — Marks a Webflow lightbox element as one the script should enhance with infinite looping. Add it to the lightbox itself; placed inside a CMS collection item it applies to every generated card, so the whole gallery is covered at once.

Resources

Frequently asked questions

Why does the Webflow lightbox stop at the first and last image?
By default the native lightbox has no wrap-around — when you reach the start or end of a group, the arrow in that direction is disabled, so you can only move the other way. Adding infinite looping lets people keep going in either direction without ever hitting an edge.
How do I make a Webflow lightbox loop infinitely?
Add a small script to the page's Before </body> section and mark each lightbox element with a single custom attribute, data-lightbox-trigger. The script watches the navigation arrows and stops them from ever disabling, so the gallery wraps around endlessly on desktop and mobile.
Does this work with both CMS and static lightbox galleries?
Yes. The technique doesn't care where the images come from — the same attribute and script enhance a CMS collection list and a set of static lightbox elements identically, as long as each lightbox shares a group name.
Is an infinite-looping lightbox still accessible?
It can actually be more accessible. Because the arrows never become disabled, someone using a keyboard or screen reader can tab to an arrow and press Enter, or use the left and right arrow keys, and keep exploring the whole gallery without getting blocked.
Where does the custom attribute go in Webflow?
Directly on the Webflow lightbox element. If that lightbox lives inside a CMS collection item, the attribute is automatically applied to every card the collection generates, so one setting covers the entire gallery.

← Back to the course

Also part of these courses