Lightbox
Full-screen media viewer with gallery navigation, keyboard controls, and zoom.
Gallery
Click any thumbnail to open the fullscreen viewer. Use the on-screen
arrows, the keyboard ← / → keys, or
Esc to navigate and close.
<div x-data="lightboxDemo(images)">
<!-- Thumbnail strip -->
<button @click="open(idx)" :class="{ 'sc-lightbox-thumb--active': idx === activeIndex }">
<img :src="img.thumb" :alt="img.caption">
</button>
<!-- Fullscreen dialog (DaisyUI native <dialog>) -->
<dialog class="modal sc-lightbox-dialog" x-ref="dialog" @keydown="onKeydown($event)">
<div class="modal-box">
<img :src="current?.src" @click="toggleZoom()">
<button @click="prev()">‹</button>
<button @click="next()">›</button>
</div>
</dialog>
</div>Single image
When there's only one image, navigation controls and the counter are left out rather than disabled — there's nothing to navigate to.
States
Beyond the open/closed dialog itself, a real lightbox needs a loading state for the full-resolution image and an empty state for a gallery prop with zero items.