Galleries · DESIGN EDITION
Habitat architectural gallery
An editorial architectural gallery with a panoramic lead image, staggered supporting images and a keyboard-operated viewer.
Small vanilla JavaScript enhancement · MIT codeFree responsive HTML image gallery snippets
Browse responsive image galleries for portfolios, restaurants, properties and products. Includes local demo images, keyboard lightboxes and Astro components.
- HTML + Astro components
- Open code and individual downloads
- MIT code · scoped styles
6 designs
Galleries · HTML + ASTRO
Portfolio grid gallery
A three-column portfolio image grid with captions and a keyboard-operated lightbox.
Small vanilla JavaScript enhancement · MIT code
Galleries · HTML + ASTRO
Restaurant story gallery
An editorial photo layout with a leading image and smaller supporting views for a restaurant or venue.
Small vanilla JavaScript enhancement · MIT code
Galleries · HTML + ASTRO
Property feature gallery
A wide featured image and supporting photo grid for a property, room or venue presentation.
Small vanilla JavaScript enhancement · MIT code
Galleries · HTML + ASTRO
Product image viewer
A large main image with labeled thumbnail controls and a progressive image-link fallback.
Small vanilla JavaScript enhancement · MIT code
Galleries · HTML + ASTRO
Photography contact sheet
A numbered contact-sheet gallery with compact captions, fine rules and an optional enlarged view.
Small vanilla JavaScript enhancement · MIT codeCHOOSING A SECTION
Using these galleries
Choose a gallery structure that supports the way visitors compare images. A uniform grid suits a portfolio; a featured image can introduce a room or property; a product viewer keeps related views together. These examples include local photographs, image dimensions and caption text. Images open directly without JavaScript, while the enhanced lightbox supports previous/next controls, Escape and focus return. Replace the photographs and descriptions with work you have permission to publish.
- Write descriptions for the actual replacement images.
- Keep image dimensions to reserve layout space.
- Optimize and resize source files before using a large gallery on a production page.