Component

ImageGallery

Image grid with lightbox viewer featuring zoom, pan, and keyboard navigation.

tsx
import { ImageGallery, ImagePreview, Lightbox } from 'wss3-forge'

Usage

Click images to open full-screen lightbox

Lightbox supports zoom, pan, and keyboard navigation

ImagePreview for single image with lightbox

Customizable grid columns and aspect ratio


Examples

Image Gallery

tsx
1<ImageGallery
2 images={[
3 { src: 'https://picsum.photos/seed/1/800/600', title: 'Mountain View' },
4 { src: 'https://picsum.photos/seed/2/800/600', title: 'Ocean Sunset' },
5 { src: 'https://picsum.photos/seed/3/800/600', title: 'Forest Path' },
6 { src: 'https://picsum.photos/seed/4/800/600', title: 'City Lights' },
7 { src: 'https://picsum.photos/seed/5/800/600', title: 'Desert Dunes' },
8 { src: 'https://picsum.photos/seed/6/800/600', title: 'Lake Reflection' }
9 ]}
10 columns={3}
11 aspectRatio="4/3"
12/>

Single Image Preview

tsx
1<ImagePreview
2 src="https://picsum.photos/seed/preview/1200/800"
3 alt="Preview image"
4 aspectRatio="16 / 9"
5 width={400}
6/>

Previous

Carousel

Next

VideoPlayer

Last updated: December 2025

Cookies

We use cookies to improve your experience and save your preferences.