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

Cleanup Magazine components

Tasks

Add demos page

Replace templated demo descriptions

JSON and XML Feeds