This video takes an image View and turns it into a clickable grid that opens a modal with previous/next navigation, all from the Views format settings.
Setting up the view
Choose Views Vanilla JavaScript Lightbox as the Format and Fields as the row style. The first field has to be an image; any fields after it are optional and render as caption or overlay text. The module ships an optional starter view, views.view.vvjl_example, which installs when nothing else on the site claims that ID — a working reference is faster than a blank form.
Grid, animation and overlay
- Grid Image Width (px) and Grid Image Gap (px) under Grid Settings control the thumbnail layout.
- Animation Type under Animation Settings applies when you click next or previous inside the modal, not when the modal opens.
- Overlay Color, an Overlay Opacity slider that echoes its own value as you drag it, and a Disable Overlay Color checkbox that greys out the other two.
One thing the settings form will not show you: there is no "Enable CSS Library" checkbox on this format. The stylesheet is structural rather than decorative here, so the plugin opts out of the shared toggle instead of letting you break the modal.
Accessibility in the modal
Focus is trapped inside the open modal using the shared focus-trap helper from VVJ Core, Escape closes it, and ARIA state plus a screen-reader announcement travel with every image change. Hydration is lazy and driven by an IntersectionObserver, and every listener is tracked by an AbortController so nothing leaks across an AJAX page swap.
What it runs on
From vvjl.info.yml: core_version_requirement: ^11.3 || ^12, php: 8.3, and a dependency list of Views, Filter and VVJ Core. Drupal 10 does not satisfy that constraint, so the 1.x branch remains the option there.
Keep going
Every option is documented on the Views Lightbox module page. For the accessibility groundwork behind the modal, read Building Accessible Drupal Themes.
Planning something larger than a single feature — a rebuild, or a move off an older Drupal? Drupal architecture services, or request a quote.
