Web Dev Tools
Categories

Lightbox & Image Gallery

Tap an image, zoom, swipe, full-screen — for galleries.

React

  • ★ yet-another-react-lightbox — modern, zero-deps, plugin system (zoom, video, captions, thumbnails). The default for new React projects.
  • PhotoSwipe + react-photoswipe-gallery — long-running classic; great touch interactions.
  • Swiper with Lightbox plugin — if you're already on Swiper.
  • react-image-lightbox — older, simpler.
  • Lightbox.js — newer minimal alternative.

Framework-agnostic

  • ★ PhotoSwipe — the classic; lots of integrations.
  • GLightbox — vanilla, supports image / video / iframe.
  • lightGallery — feature-rich; commercial license for some uses.
  • medium-zoom — minimal, just "click to zoom"; ~3 KB.

Image grids / masonry

  • ★ react-photo-album — flexible photo album layouts (rows, columns, masonry).
  • react-masonry-css — pure CSS masonry; tiny.
  • CSS Grid masonry value — landing in browsers; preview behind flags / polyfills.
  • react-grid-layout — Pinterest-style draggable grid.

Image zoom (in place, no modal)

  • medium-zoom — Medium's "click to zoom" pattern.
  • react-medium-image-zoom — React port.

Inspirations / stock

  • Unsplash API, Pexels API, Pixabay — free stock photos with APIs.

Pick this if…

  • Default React lightbox: yet-another-react-lightbox.
  • Fast, vanilla: PhotoSwipe.
  • Just zoom one image: medium-zoom.
  • Photo album layout: react-photo-album.
  • Pinterest-style grid: react-grid-layout.

Previous

Carousels & Sliders

Next

Command Palettes & Keybindings

On this page