Shop gallery

A shop's photos as a bento mosaic (one 2×2 lead, four tiles, the last one « + N photos »), a snap strip with a counter on a phone, and a lightbox with swipe, arrow keys and the alt text as caption. Fixed ratios, no layout shift; the lightbox is a lazy chunk.

Web · ✓Mobile · n/aBureau · ✓BêtaMédias

import { ShopGallery, shopGalleryLabels, shopGalleryLabelsFr } from "@krizaka/ui/shop-gallery";

Web uniquement — React, depuis @krizaka/ui/shop-gallery. Bêta : son API peut encore changer à une version mineure.

Mobile · n/a. A shop's public page is a web page. → Photo grid

Pourquoi il est là. Akinaza's shop pages (krizaka/akinaza#403): the « Photos » section as a mosaic that opens a lightbox, replacing the raw photo scroller.

Quand l’utiliser

The « Photos » section of a shop page: five to a few dozen real photos that a visitor looks at, then opens one by one.
Any set of still images where a quiet mosaic and a full-size viewer are enough.

Quand ne pas l’utiliser

Photos mixed with muted loops and captions on the tiles.À la place : Media gallery
A feed of creator videos with counts and a preview.À la place : Media grid

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { ShopGallery, shopGalleryLabels, shopGalleryLabelsFr } from "@krizaka/ui/shop-gallery";

Exemples

Five photos

The bento at its fullest: a lead and four tiles; a snap strip on a phone.

Twelve photos

The last tile reads « + 8 photos » and opens the rest in the lightbox.

Three photos, in French

A short set stays a mosaic on every screen; labels in French.

Props

A shop's photos: a bento mosaic (one 2×2 lead and four tiles, the last one « + N photos »), a snap strip on a phone, and a lightbox.

Prop	Type	Défaut	Description
`label`requis	`string`	—	The gallery's accessible name (`Photos of the salon`).
`photos`requis	`readonly ShopGalleryPhoto[]`	—	The shop's photos, in order, already unique.
`labels`	`Partial<ShopGalleryLabels>`	—	Translated texts; `shopGalleryLabelsFr` for French.
`sizes`	`string`	—	The tiles' `sizes` (default: the bento's share of a 72 rem page on a desktop, 78 vw on a phone).

Accessibilité

Each tile is a button named « Open photo 3 of 12: … »; the lightbox is a modal dialog with its focus trapped, and swiping works on touch.
Under reduced motion the hover zoom, the smooth strip scroll and the photo fade stop.

Clavier

Touches	Action
`Tab / Enter / Space`	Move across the tiles and open one in the lightbox.
`← →`	Previous and next photo in the lightbox.
`Esc`	Close the lightbox; focus returns to the tile that opened it.

Bonnes pratiques

Give each photo its alt: it names the tile for a screen reader and is the lightbox's caption.
Pass srcSet (400 / 800 / 1200 w) for the tiles and fullSrcSet for the lightbox; the tiles carry sizes and a fixed ratio, so the page never shifts.
From five photos on a phone the mosaic becomes a snap strip with a « 1 / N » counter; with fewer it stays a two-column mosaic.
Pass labels translated (shopGalleryLabelsFr for French); the host's text is never hard-coded here.

Générée depuis le code de @krizaka/ui 3.69.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub