Lightbox

Full-screen image viewer using native <dialog>. Focus trap and Escape key handling built in.

Gallery + Lightbox

 
<!-- Thumbnail triggers -->
<button data-lightbox-dialog="lb" data-lightbox-src="full.jpg" data-lightbox-alt="Alt text" aria-label="View: Alt text">
  <img src="thumb.jpg" alt="Alt text" loading="lazy">
</button>

<!-- Native dialog lightbox -->
<dialog class="lightbox" id="lb">
  <button class="close" aria-label="Close lightbox"
          data-dialog-close="lb">
    <span class="axicon render" data-name="X"></span>
  </button>
  <figure>
    <img id="lb-img" src="" alt="">
  </figure>
</dialog>

Interaction Pattern

document.addEventListener('click', (event) => {
  const trigger = event.target.closest('[data-lightbox-dialog]');
  if (!trigger) return;

  const dialog = document.getElementById(trigger.getAttribute('data-lightbox-dialog'));
  const image = dialog?.querySelector('img');
  if (!dialog || !image) return;

  image.src = trigger.getAttribute('data-lightbox-src') || '';
  image.alt = trigger.getAttribute('data-lightbox-alt') || '';
  dialog.showModal();
});

Accessibility

  • Thumbnails must be <button> elements — not plain <img> with a bound click handler
  • The trigger needs aria-label describing what opens: aria-label="View: Mountain"
  • The full-size image must have alt text — use the same text as the thumbnail
  • Close button needs aria-label="Close lightbox"
  • Native <dialog> traps focus and announces the dialog to screen readers

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Lightbox component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.