Gallery

Thumb grid + lightbox

A grid of thumbnails that open one large image at a time — stills, key visuals, a photo set. For a single strip people swipe through in place, use a Carousel.

Basic

<script setup lang="ts">
import { BlessGallery } from "blessing-ui";
import { shots } from "./_data";
</script>

<template>
  <BlessGallery :items="shots" columns="120px" style="max-width: 640px" />
</template>

• Give every item alt text; without it, thumbs and the viewer fall back to the caption or "Image 2 of 8".
• The viewer is a Modal: ← / → (and the buttons) step through, the count is announced, Esc closes and focus returns to the thumb. loop wraps at the ends.

Usage

import { BlessGallery } from "blessing-ui";

API

Props

Name	Type	Default	Description
items*	BlessGalleryItem[]	—
columns	string	"160px"	thumbnail grid column min width
loop	boolean	true
prevLabel	string	"Previous"
nextLabel	string	"Next"
modelValue	number	-1	index of open item, -1 = closed

Events

Name	Payload	Description
update:modelValue	[value: number]

Slots

Name	Scope	Description
thumb	{ item: BlessGalleryItem; index: number; }