ImageGallery

Image grid with modal preview. Clicking a thumbnail opens that image, and the modal footer provides bounded previous/next navigation.

const items = [ { id: 'a', url: 'https://picsum.photos/seed/a/640/420', name: 'A' }, { id: 'b', url: 'https://picsum.photos/seed/b/640/420', name: 'B' }, { id: 'c', url: 'https://picsum.photos/seed/c/640/420', name: 'C' }, ]

Basic Usage

ImageGallery

Demo will load when visible.

<template>
  <TxImageGallery :items="items" />
</template>

API (Lite)

Property	Type	Default	Description
items			Image list. Each item contains id, url, and optional name
startIndex			Current preview index; out-of-range values are clamped

Events

Property	Type	Default	Description
open		-	Fired after clicking a thumbnail and opening the preview
close		-	Fired when the modal closes

Interaction Contract

Thumbnail buttons expose readable aria-label values. Image alt text uses name; unnamed images keep empty alt text.
Empty items render no thumbnails and do not open the modal or emit open.
startIndex and list length changes are clamped to a valid index. Clearing the list closes the preview.
The modal inherits TxModal dialog semantics, title linkage, close button, backdrop close, and Escape close behavior.
Footer Prev / Next controls only navigate inside valid bounds. Prev is disabled on the first image; Next is disabled on the last image.