Keyboard Shortcuts

Last updated: March 2, 2026

Zoomora includes full keyboard support out of the box. All shortcuts are active whenever the lightbox is open — no configuration required.

Shortcut Reference

Key	Action
`←` Arrow Left	Navigate to the previous item
`→` Arrow Right	Navigate to the next item
`Esc`	Close the lightbox, or exit fullscreen if active
`Z`	Cycle to the next zoom level
`F`	Toggle fullscreen mode
`T`	Toggle the thumbnail strip

How Keyboard Handling Works

Zoomora attaches a keydown listener to the document when initialised. The handler checks whether the lightbox is currently open before acting — if the lightbox is closed, all shortcuts are silently ignored so they do not interfere with the rest of your page.

// Zoomora checks this internally before handling any key
if (!this.zoomora.classList.contains('active')) return;

This means keyboard shortcuts are scoped to the lightbox session and will never conflict with keyboard interactions elsewhere on your page.

Escape Key Behaviour

The Esc key has context-aware behaviour:

If the lightbox is in fullscreen mode, pressing Esc exits fullscreen but keeps the lightbox open
If the lightbox is not in fullscreen, pressing Esc closes the lightbox entirely

This matches the behaviour users expect from native fullscreen applications and browser fullscreen APIs.

Z Key and Zoom

Pressing Z cycles through zoom levels exactly like clicking the zoom button — 1.5x, 2x, 3x, 100% actual size, then back to fit-to-screen.

The Z shortcut works even when showZoom: false is set. Hiding the zoom button removes the visual control but does not disable the underlying zoom functionality or its keyboard shortcut.

T Key and Thumbnails

Pressing T toggles the thumbnail strip exactly like clicking the thumbnail button. Does nothing if there is only one item in the current gallery.

Disabling Keyboard Shortcuts

Zoomora does not currently provide a configuration option to disable keyboard shortcuts. If you need to prevent specific shortcuts from firing — for example, if arrow keys conflict with a custom slider running behind the lightbox — you can stop propagation on the conflicting keys before Zoomora’s listener runs:

// Stop arrow keys from reaching Zoomora
document.addEventListener('keydown', (e) => {
  if (['ArrowLeft', 'ArrowRight'].includes(e.key)) {
    if (lightbox.isOpen()) {
      e.stopImmediatePropagation();
      // Handle navigation your own way
    }
  }
}, true); // true = capture phase, runs before Zoomora's listener

Note: Use stopImmediatePropagation in the capture phase (true as the third argument) to ensure your handler runs before Zoomora’s document-level listener.

Accessibility

Keyboard support is a core part of Zoomora’s accessibility. Users who navigate primarily by keyboard can fully operate the lightbox — opening, navigating, zooming, and closing — without touching a mouse or trackpad.

For screen reader support, make sure your <img> tags always include descriptive alt attributes. Zoomora uses alt as a fallback when no data-caption is provided.

Next Step

Read Custom Styling to learn how to override Zoomora’s default styles and adapt the lightbox to your design system.

Quick Links