Gallery

Ramil Karimov developer

April 16

Click any thumbnail to open it in a native, unstyled dialog.

Usage

Import Gallery from $lib and pass an array of imagetools-processed images to the images prop.

Glob import

Load all images from a folder at once. Ideal when you have many files and don't need to reference them individually.

<script>
import { Gallery } from '$lib';

const modules = import.meta.glob('./assets/*.jpg', {
  eager: true,
  import: 'default',
});
const images = Object.values(modules);
</script>

<Gallery {images} />

Individual imports

Import each image explicitly. Useful when you need a specific subset or want full control over order.

<script>
import { Gallery } from '$lib';
import hero from './assets/hero.jpg';
import detail from './assets/detail.jpg';
import wide from './assets/wide.jpg';
</script>

<Gallery images={[hero, detail, wide]} />

Mixed sources

Combine glob and individual imports. For example, glob a folder and prepend a cover image.

<script>
import { Gallery } from '$lib';
import cover from './assets/cover.jpg';

const rest = Object.values(
  import.meta.glob('./assets/photos/*.jpg', {
    eager: true,
    import: 'default',
  }),
);
const images = [cover, ...rest];
</script>

<Gallery {images} />

Captions

Pass an optional captions prop as a Record<string, string> keyed by the same paths used in the images record. Captions appear as <figcaption> in both the grid and the dialog.

<script>
import { Gallery } from '$lib';

const images = import.meta.glob('./assets/*.jpg', {
  eager: true,
  import: 'default',
});

const captions = {
  './assets/hero.jpg': 'Hero shot',
  './assets/detail.jpg': 'Close-up detail',
};
</script>

<Gallery {images} {captions} />

Features

Click a thumbnail to open a fullscreen dialog with the image
Horizontal scroll-snap navigation between images
Prev/next buttons on each side of the dialog
View transition animation from thumbnail to fullscreen
Close on Esc, backdrop click, or vertical page scroll
Full-size images preloaded on hover for instant transitions
Thumbnails use sizes="120px" to load smaller variants

Sveleton

Bootstrap your next media project

Get Started

Fix time to read

Tasks

Restore dynamic OG image generation

Add feed link tags to layout

Add optional snippet for article preview