Lightbox Overview

The FotoGrids lightbox is a full-screen image viewer that opens when a visitor clicks on a gallery item. It supports smooth navigation between images, a customizable info panel, thumbnail strips, zoom, social sharing, and more — all without leaving the page.

Enabling the Lightbox #

The Lightbox is controlled by the Item Click Behavior setting, found under Interactions in the gallery settings panel.

Set it to Open in Lightbox to enable the Lightbox for a gallery. All Lightbox settings become available beneath this choice.

How the Lightbox Works #

When a visitor clicks any item in the gallery, the Lightbox opens over the page. It is a singleton — one Lightbox instance serves all galleries on the page, re-reading each gallery’s settings when it opens.

What the Lightbox displays

• The full-resolution image or image (or the largest available size).
• Optional navigation arrows and dot indicators.
• An optional thumbnail strip for quick browsing.
• An optional info panel with caption, EXIF, tags, sharing, and more.
• A close button and optional fullscreen toggle.

The visitor can navigate between all items in the same gallery using arrows, keyboard, or swipe gestures, without closing the Lightbox.

Lightbox Settings Overview #

All Lightbox settings are grouped into four sub-tabs inside Interactions → Lightbox Settings (visible when Item Click Behavior is set to Lightbox):

Each sub-tab is covered in its own article — see the Related section below.

Keyboard Shortcuts #

These shortcuts are always active while the lightbox is open:

Touch & Swipe Gestures #

On touch devices the Lightbox responds to:

• Swipe left / right — Navigate to the next or previous item
• Pinch — Zoom in or out (when zoom is enabled)
• Drag while zoomed — Pan around the zoomed item

Custom Events #

Developers can listen for Lightbox events on any gallery element:

galleryEl.addEventListener( 'fotogrids:lightbox:open', ( e ) => {
	console.log( 'Opened at index', e.detail.index );
} );

galleryEl.addEventListener( 'fotogrids:lightbox:navigate', ( e ) => {
	console.log( 'Navigated', e.detail.direction, 'to index', e.detail.index );
} );

galleryEl.addEventListener( 'fotogrids:lightbox:close', () => {
	console.log( 'Lightbox closed' );
} );

Each event’s detail object includes galleryEl, index, and (for open/navigate) the current item object.

Accessibility #

The FotoGrids Lightbox is built with accessibility in mind:

• Implemented as a native <dialog> element with aria-modal="true"
• Focus is trapped inside the dialog while it is open
• Focus returns to the item that opened the Lightbox on close
• All toolbar buttons have aria-label attributes
• Navigation dots use role="tab" / role="tablist" with aria-selected
• The item counter uses aria-atomic="true" so screen readers announce it as a whole
• The info panel uses aria-live="polite" for dynamic content updates
• The current item position is reflected in the dialog’s aria-label