Lightbox Gallery Block for React

Each picture in PICTURES has a title, a place, a year, a credit, a description and a ratio; add your image's address to it. Then replace the Scene in the frame with <img alt="" className="size-full object-cover" src={…} /> (the button and the caption already name it), and the one in the viewer with an <img> that has alt set to the picture's description and object-contain. The comment above Scene says where. Set ratio to the photograph's width over its height, so the viewer shows it whole.

Each one is a scene: a kind (hills, range, lake, facade, room, chair, lamp or pattern) and three numbers: light (where the sun, the window or the key light is, across the picture), horizon (where the ground meets the sky or the floor meets the wall) and a seed that moves ridgelines, lights windows and turns tiles. Each kind is a function that returns the picture as SVG paths, each painted with one of a few inks mixed from your theme's colours, so two facades with different numbers are two different buildings. Nothing is random at render time: the same seed draws the same picture on the server and in the browser.

One. The block keeps the open state and the picture shown, so a frame, Previous, Next, an arrow key or a swipe only changes which picture it shows. Previous and Next wrap around. The viewer's title, counter and credit follow, the picture fades in (still with reduced motion), and a polite status line says "Lamp No. 4, 7 of 9" for a screen reader. The picture itself is an image named by its description.

Tab reaches each frame and Enter or Space opens the viewer. Inside, the arrow keys move to the previous and next picture (mirrored in a right-to-left layout), Home and End jump to the first and the last, Tab cycles through the close button, Previous and Next, and Escape closes. Focus then returns to the frame of the picture you were looking at, not the one you opened, so step on three pictures and close and you land on that frame. DialogContent takes finalFocus, a function that returns that frame.

The frames go two across, with the featured one across both columns. The viewer fills the screen: the counter and the close button at the top, the picture as large as it fits in between, and the caption with full-width Previous and Next buttons at the foot, within reach of a thumb. A horizontal swipe over the picture steps through them too.

Yes. Every colour in the pictures is mixed from your theme's foreground, background and muted tokens: in a light theme they print dark on pale grey, in a dark theme they turn low-key with lamps and skies still light. The block ends on its last row of frames with no closing line, so the next section's top rule closes it, and the viewer uses your theme's dialog surface.