Lightbox

Shows images at full size over the page, one at a time. With more than one image, buttons on either side and the Left and Right keys move between them, wrapping at the ends, and a count says where you are. Escape, the close button or a click outside the image closes it, and the image can be opened on its own in a new tab. open and index are bindable, so a thumbnail can open it at the image it shows. Built on the bits-ui Dialog: focus stays inside while it is open and goes back to the thumbnail that opened it.

Gallery

Each thumbnail opens the lightbox at its own image by setting index before open. From there the arrows on either side, or the Left and Right keys, page through the rest and wrap at the ends.

{#each images as image, index (image.src)}
	<button
		type="button"
		aria-label="View {image.alt}"
		class="cursor-zoom-in rounded-md"
		onclick={() => show(index)}
	>
		<Thumbnail src={image.src} alt={image.alt} class="size-24" />
	</button>
{/each}
<Lightbox {images} bind:open={galleryOpen} bind:index={galleryIndex} />

A single image

With one image there is nothing to page through, so the arrows and the count stay out of the way. The image can still be opened on its own in a new tab.

<button
	type="button"
	aria-label="View {images[0].alt}"
	class="cursor-zoom-in rounded-md"
	onclick={() => (singleOpen = true)}
>
	<Thumbnail src={images[0].src} alt={images[0].alt} class="size-24" />
</button>
<Lightbox images={[images[0]]} bind:open={singleOpen} />

Opened from anywhere

Nothing about the lightbox is tied to a thumbnail: any control can set open, and binding index tells the page which image the shopper stopped at.

Last seen: tortoiseshell.jpg

<div class="flex items-center gap-3">
	<Button variant="secondary" onclick={() => (browseOpen = true)}>
		<Images class="size-4" />Browse photos
	</Button>
	<span class="text-muted text-sm">Last seen: {images[browseIndex].alt}</span>
</div>
<Lightbox {images} bind:open={browseOpen} bind:index={browseIndex} />

API

Prop	Type	Default	Description
`images` required	`LightboxImage[]`		The images to page through, in order.
`open` bindable	`boolean`	`false`	Whether the lightbox is showing. Two-way bindable via `bind:open`.
`index` bindable	`number`	`0`	Position in `images` of the image showing. Two-way bindable via `bind:index`.

`LightboxImage`

Prop	Type	Default	Description
`src` required	`string`		Image URL.
`alt` required	`string`		What the image shows. Also the caption under it and the name of the lightbox.