Skip to content
arrie.dev Templates

Components

Full Frame

An image grid that opens into a full-screen lightbox. Keyboard and swipe, no library.

R320

Once. Yours to keep

Get this template

The shape of it, not a screenshot

What it is

A responsive grid that opens into a full-screen viewer, in about 6 KB of JavaScript with nothing pulled in. Arrow keys and swipe move between images, Escape closes, focus returns to the thumbnail that was opened, and the page behind stops scrolling while the viewer is up.

Images and captions come from one file. Astro's image handling emits WebP at several widths with width and height attributes set, so the layout does not jump while pictures load, and the full-size file is only fetched when the lightbox opens. Two grid layouts are included: even tiles, and a column layout for a mix of portrait and landscape.

Wrong choice for a photographer running albums, client proofing or downloads. This is one gallery on one page. No video, no zoom and pan.

Included

What you get

  • Grid component in tile and column layouts
  • Lightbox with arrows, swipe and Escape
  • gallery.js listing images, alt text and captions
  • Responsive WebP output through Astro image
  • Focus return and scroll lock on open
  • Image counter and optional caption bar
How it works

After you buy

  1. 01 You message me On WhatsApp. Tell me which one and where it is going.
  2. 02 I set it up for you Your words, your colours, your logo dropped in — or the raw files if you would rather do it yourself.
  3. 03 It goes live On your hosting or on mine. Either way it ends up in your own account.
  4. 04 It is yours The whole thing, with nothing to renew and nothing tied back to me.