ImageGallery
Responsive image gallery with lightbox view, thumbnail navigation, zoom support, and keyboard-accessible slideshow mode
ImageGallery Component
Gallery layouts with optional lightbox navigation and caption overlays.
Basic Usage
Simple image grid.
Implementation Notes
- • Start with small grids for reliable loading behavior.
- • Always provide accurate alt and caption text.
- • Keep aspect ratio diversity realistic in test data.
Normal Usage
Enable lightbox for enlarged navigation.
No interaction yet.
Implementation Notes
- • Lightbox improves detail inspection and storytelling.
- • Keep collection switching instant and predictable.
- • Ensure captions remain meaningful in modal context.
Advanced Usage
Responsive column config for adaptive layouts.
Implementation Notes
- • Responsive columns prevent cramped mobile layouts.
- • Choose gap tokens by image density and caption length.
- • Separate dense and editorial galleries by breakpoint strategy.
Real-Life Use Cases
Useful in portfolio showcases and product media pages.
Product Detail Media
Event Recap Grid
Implementation Notes
- • Great for ecommerce PDPs and campaign recap pages.
- • Keep thumbnail and lightbox controls discoverable.
- • Optimize image dimensions for predictable loading.
Related Components
View allContainer enforcing aspect ratio constraints with responsive behavior and overflow handling
Calendar date display with month/year navigation, date range selection, and locale support
Image/content slideshow with navigation controls, autoplay, infinite loop, and swipe gestures
Video player with controls, playback speed, volume, fullscreen, and subtitle support