Lightbox

A fullscreen overlay gallery for images and videos. The <velin-lightbox> web component supports keyboard navigation, touch gestures, and mixed media.

Basic gallery

Wrap thumbnail links inside <velin-lightbox>. Each <a> points to the full-size image.

<velin-lightbox>
  <a href="photo-full-1.jpg" data-caption="Mountain lake">
    <img src="photo-thumb-1.jpg" alt="Mountain lake">
  </a>
  <a href="photo-full-2.jpg" data-caption="Dog portrait">
    <img src="photo-thumb-2.jpg" alt="Dog portrait">
  </a>
  <a href="photo-full-3.jpg" data-caption="Misty forest">
    <img src="photo-thumb-3.jpg" alt="Misty forest">
  </a>
</velin-lightbox>

Keyboard navigation

The lightbox traps focus while open and supports ← / → to navigate, Escape to close. Screen readers announce slide changes via a live region.

<!-- Keyboard nav is built-in. No extra attributes needed. -->
<velin-lightbox>
  <a href="img1.jpg"><img src="thumb1.jpg" alt="Slide 1"></a>
  <a href="img2.jpg"><img src="thumb2.jpg" alt="Slide 2"></a>
</velin-lightbox>

<!-- Key bindings:
  ← / →   Navigate slides
  Escape   Close lightbox
  Home     First slide
  End      Last slide
-->

Video support

Add data-type="video" to a link to embed a <video> or iframe inside the lightbox.

<velin-lightbox>
  <a href="photo.jpg">
    <img src="photo-thumb.jpg" alt="Photo">
  </a>
  <a href="clip.mp4" data-type="video" data-caption="Short clip">
    <img src="video-poster.jpg" alt="Video thumbnail">
  </a>
  <a href="https://www.youtube.com/embed/dQw4w9WgXcQ"
     data-type="iframe" data-caption="YouTube embed">
    <img src="yt-thumb.jpg" alt="YouTube video">
  </a>
</velin-lightbox>

CSS variables

Customise the lightbox appearance via CSS custom properties.

velin-lightbox {
  --velin-lightbox-bg: rgba(0, 0, 0, .92);
  --velin-lightbox-z-index: 1090;
  --velin-lightbox-caption-color: #fff;
  --velin-lightbox-btn-size: 2.5rem;
  --velin-lightbox-transition: .3s ease;
}