Features

Image lightbox

Zoomable content images with galleries, captions and keyboard nav.

Updated Sep 1, 2026 Edit this page

Every image inside the article body becomes a click-to-zoom target. No markup required.

Behaviour

• Click (or focus + Enter) an image to open the overlay
• Multiple images on a page form a gallery: ← / → to move, the counter shows 3 / 8
• Esc or a click on the backdrop closes it
• The caption comes from the image alt text, or a <figcaption> if present

Opt out

<img src="/assets/images/logo.svg" class="no-lightbox" alt="Logo">

Images already wrapped in a link are skipped automatically.

High-resolution zoom

Serve a small image in the page and a large one in the lightbox:

<img src="screenshot-800.jpg"
     data-full="screenshot-2000.jpg"
     alt="The dashboard, annotated" loading="lazy">

Disable globally

docsteer:
  lightbox:
    enabled: false

When disabled, lightbox.js is not even loaded.

Try it — sample gallery

Three images, so they form a gallery. Click any one, then use ← / → to move between them and Esc to close. Each shows the same layout in a different skin.

Give SVGs a width and height

An SVG carrying only a viewBox has no intrinsic size, so the browser falls back to 300×150 — and since the lightbox caps size rather than forcing it, such an image opens smaller than it looked in the page. Put width and height on the <svg> element and the problem disappears. The theme also carries a fallback rule for SVGs that lack them.