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.

Good to know

images must be valid JSON: a parse error fails the build with the offending value, and so does a src using an unsafe scheme. Keep the JSON’s own strings in double quotes inside the single-quoted attribute.

Give every image an alt. It is the thumbnail’s alternative text and also names the button that opens it (“Open Forest”); without one the button falls back to “Open image 3”.

The overlay only exists after the page’s JavaScript runs — a no-JS reader still gets the thumbnail grid, but clicking does nothing, so don’t make the full-size image the only way to read something.

CSS Selector

The grid on the page and the full-screen overlay are styled separately — the overlay is portalled out of the gallery, so a rule nested under the grid won’t reach it:

Selector	Targets
`[data-aardvark-lightbox]`	The thumbnail grid wrapper.
`[data-aardvark-lightbox] .aardvark-lightbox-thumb`	One thumbnail button — e.g. `:hover { transform: scale(1.05); }`.

The full-screen overlay and carousel chrome are styled by the upstream @mantine-bites/lightbox stylesheet, which loads with the page.

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