Build an Image Gallery with lightbox

Question

Accepted Answer

## Building an Image Gallery with Lightbox in React

**Mental model:** A grid of thumbnails plus an overlay (lightbox) that shows one image at a time. The lightbox is driven by a single piece of state: the *index* of the open image (or `null` when closed). Prev/next change the index with wrap; Escape and backdrop click close.

### Step 1 — Open index state
```jsx
const [index, setIndex] = useState(null); // null = closed
const open = (i) => setIndex(i);
const close = () => setIndex(null);
```

### Step 2 — Prev / next with wrap
```jsx
const prev = () => setIndex((i) => (i - 1 + images.length) % images.length);
const next = () => setIndex((i) => (i + 1) % images.length);
```

### Step 3 — Keyboard control while open
```jsx
useEffect(() => {
  if (index === null) return;
  const onKey = (e) => { if (e.key === 'Escape') close(); if (e.key === 'ArrowRight') next(); if (e.key === 'ArrowLeft') prev(); };
  window.addEventListener('keydown', onKey);
  return () => window.removeEventListener('

Build an Image Gallery with lightbox

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)