Lightbox — aardvark

The community Lightbox tag — a full-screen image lightbox wrapping the @mantine-bites/lightbox extension, built on Embla Carousel. Usage, options, and live examples.

A full-screen image lightbox: the tag renders a thumbnail grid, and clicking a thumbnail opens that image full-screen with carousel navigation between the rest. images is a JSON array of { "src", "alt" } objects; cols sets how many thumbnails sit per row.

A Community Component — wraps Lightbox by rilrom, MIT licensed, npm @mantine-bites/lightbox (built on Embla Carousel).

Use it as {% lightbox %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'lightbox', …).

Demonstrations

A thumbnail grid

Pass images as a JSON array of { "src", "alt" } objects. Each renders as a thumbnail; click one to open the full-screen lightbox and swipe (or arrow) through the set.

Source: Markdown

Source: Python

Grid width

Set cols to change how many thumbnails sit per row — here four across a tighter gallery.

Source: Markdown

Source: Python

With other components

Because images is plain data, a Python caller can build the gallery from a loop — for example mapping a list of asset URLs — and render it under a Title heading:

Gallery

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its default.

Attribute	Valid values	Description
`images`	JSON array string	The gallery images. Each is a `{ "src", "alt" }` object. Relative paths and `http(s)://` URLs are allowed; unsafe schemes are rejected at build time.
`cols`	integer	Thumbnails per row in the grid. Defaults to `3`.
`attr={…}`	An object of HTML attributes	Forwards raw HTML attributes onto the grid wrapper element. See Injecting Attributes.

CSS Selector

The grid wrapper carries data-aardvark-lightbox, and each thumbnail button carries the class aardvark-lightbox-thumb; target them to restyle the gallery:

[data-aardvark-lightbox] .aardvark-lightbox-thumb:hover {
  transform: scale(1.05);
}

The full-screen overlay and carousel chrome are styled by the upstream @mantine-bites/lightbox stylesheet, which the component pulls in automatically.

Injecting Attributes

Pass attr={…} to forward raw HTML attributes onto the grid wrapper element — useful for id, data-*, ARIA attributes, or anything not exposed as a named param:

Source: Markdown

Source: Python