ImageGallery

ImageGallery

Image gallery with thumbnail strip, zoom dialog, autoplay and crossfade.

Show multiple images with navigation, a thumbnail strip and a zoom view. Optionally with autoplay and crossfade.

Use ImageGallery whenever a single image isn't enough to tell the story: product photography from multiple angles, before/after comparisons, portfolio work, or a set of app screenshots. The thumbnail strip lets visitors jump directly to an image instead of clicking through sequentially, and the zoom dialog keeps detail available without leaving the page.

A typical case is a product page with four or five photos and autoplay disabled, so visitors control the pace, or a portfolio page with autoplay and crossfade enabled for a passive slideshow. For a lighter horizontal-scrolling alternative without thumbnails or zoom, see Swiper.

Typical use cases

On a webshop product page, ImageGallery is the block that lets a buyer inspect fabric texture, stitching or a device's ports before adding it to the cart — the zoom dialog does the job a physical store visit would otherwise do, which tends to reduce returns driven by 'it didn't look like that in the photo'. On a portfolio, the same block works as a curated case-study viewer: five or six images from a shoot or project, each one deliberate rather than an unsorted dump. For a service business such as an interior designer or contractor, a before/after gallery of past projects is a common variant, sometimes paired with a short caption per image describing the brief.

Common mistakes

The most frequent mistake is including too many images without curating them — a gallery with fifteen unsorted photos asks more of the visitor than it gives back; five to eight well-chosen images usually communicate more than twice as many mediocre ones. Mixing wildly different aspect ratios also hurts the thumbnail strip, which looks tidiest when every image shares roughly the same crop. Enabling auto-play together with a zoom-heavy use case works against itself too: a visitor who opens the zoom dialog to study detail doesn't want the slideshow advancing underneath them, so reserve autoplay for passive, decorative galleries rather than product inspection.

Each image should carry a real, descriptive filename or alt text rather than a generic placeholder — besides accessibility, it's one of the few pieces of on-page SEO signal an image-heavy gallery page has to offer.

When the images come from a product catalogue rather than a hand-picked set, feed the array from a Records loop over the product's image field instead of hardcoding paths, so a new product automatically gets its own gallery. For app screenshots specifically, consider PhoneMockup instead — it frames a single image in a device outline rather than a multi-image viewer.

gallery.jsx