Overlays & feedback

Lightbox / Image Preview

Q: How do people describe a Lightbox / Image Preview in plain words?

tap a thumbnail and it blows up full screen the black overlay where I swipe between big photos pinch-to-zoom picture viewer after I click an image

Q: How do I implement a Lightbox / Image Preview?

Implement an image lightbox: thumbnails open a full-screen dialog with the full-resolution asset (separate URL), FLIP from the thumbnail rect, arrow keys and swipe to page, pinch/double-tap zoom, swipe-down to close on touch, and restore focus to the triggering thumb on close.

Open a thumbnail into a full-screen stage with paging and pinch-zoom gestures.

Also known as image viewer · full-screen preview · photo stage

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Lightbox / Image Preview".

Implement an image lightbox: thumbnails open a full-screen dialog with the full-resolution asset (separate URL), FLIP from the thumbnail rect, arrow keys and swipe to page, pinch/double-tap zoom, swipe-down to close on touch, and restore focus to the triggering thumb on close.

Anatomy:
- thumbnail: Trigger; hint that it can expand (cursor or icon).
- overlay / stage: Usually full-viewport dark backdrop.
- prev / next: Move within a set; show “3 / 9”.
- gestures: Double-tap zoom, pinch, swipe-down to close on mobile.

Preferred API / pattern: `yet-another-react-lightbox / custom dialog stage`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Preview still loads the thumbnail URL
○Avoid: No swipe-down dismiss on mobile
○Avoid: Zoom and page gestures fight
○Avoid: Focus lost on close
○Avoid: Missing alt / labels on controls

In plain wordsHow people search for it

“tap a thumbnail and it blows up full screen”“the black overlay where I swipe between big photos”“pinch-to-zoom picture viewer after I click an image”

AnatomyOpen for part names

thumbnail: Trigger; hint that it can expand (cursor or icon).
overlay / stage: Usually full-viewport dark backdrop.
prev / next: Move within a set; show “3 / 9”.
gestures: Double-tap zoom, pinch, swipe-down to close on mobile.

How to write itOpen for stack patterns

Web (HTML/CSS)<dialog> + full-res <img> + gesture handlers

React + Tailwind + shadcn/uiyet-another-react-lightbox / custom dialog stage

SwiftUIfullScreenCover + MagnificationGesture

Ant Design<Image preview /> / Image.PreviewGroup

Notes

Serve a separate full-resolution URL in the stage; list thumbs stay light. FLIP from the thumb’s rect makes the open feel continuous. Swipe-down-to-close is muscle memory on phones—don’t ship only a tiny X. When zoomed, horizontal pan should win until the edge, then page.

Common mistakesHumans and models trip here

Preview still loads the thumbnail URL: zoom looks pixelated.
No swipe-down dismiss on mobile: users tug and get stuck.
Zoom and page gestures fight: pan while zoomed, page only at edges.
Focus lost on close: keyboard users vanish into the void—return to the thumb.
Missing alt / labels on controls: “button” with no name.

More failure symptoms on AI broke it.

Related patterns

Carousel / SlideshowA sequence of slides shown one (or a few) at a time with next/prev controls.Scrim / Overlay / BackdropA translucent layer under an overlay that dims the page and blocks clicks.Modal DialogA centered window that blocks the page until the user responds.Shared Element Transition / FLIPThe same visual morphs continuously between two screens so the space still feels continuous.

Spotted a wrong name or missing pattern?

Message on X