Image viewer

Askr supplies an interactive image viewer for images and an optional floating viewer for native Mermaid diagrams. Inspect an image directly in the article, or open a floating viewer from an image or button. SVG, PNG and JPEG share the same pan-and-zoom controls. No image service, third-party viewer or CDN is required.

See the dedicated Image viewer demonstration for static images. For interactive HTML with its own chart controls, use the Chart viewer.

Images and opt-outs

Independent figures and standalone images open the floating viewer by default:

![Layout](images/layout.svg){#fig-layout}

Inline prose images and images with an existing navigation link keep their normal treatment. .lightbox explicitly enables an image; .nolightbox excludes it. lightbox: false disables interaction for the page. Do not use viewer shortcodes or .askr-mermaid-view on a disabled page, or target an excluded image. Rendering reports the conflict instead of producing unusable controls.

Open with a button

Open an existing figure without duplicating its image or caption:

![Layout](images/layout.png){#fig-layout}

{{< askr-image-view target="fig-layout" label="View image" >}}

Or show only a button:

{{< askr-image-view src="images/layout.png" label="View image" >}}

Specify exactly one of target or src. Targets use the figure ID without # and must identify a single eligible image on the page. label defaults to View image; the src form has no caption. Paths are relative to the document.

Inspect inline, then expand

An inline viewer supplies controls directly in the article:

{{< askr-image-view src="images/layout.svg" mode="inline" label="Component layout" >}}

To convert an existing figure in place, preserving its caption:

![Layout](images/layout.svg){#fig-layout}

{{< askr-image-view target="fig-layout" mode="inline" >}}

The shortcode marks the existing figure for conversion; it does not display a second copy. Each figure can be converted once, with any number of buttons opening it. mode accepts inline or button (the default).

Inline image areas are 420px high on desktop and 320px on narrow screens. Expand moves the same viewer into a floating window. Zoom and viewing center follow it; closing returns it to the article with the updated camera intact. Different inline viewers have independent state. No state is saved after leaving the page.

Controls and galleries

  • + / − zoom by a factor of 1.25; Fit centers the whole image.
  • 100% means Fit, not original pixel size. Zooming a raster image does not increase its resolution. SVG may itself contain raster content.
  • Drag to pan. On touchscreens use one finger to pan and two to zoom.
  • Focus the inline image area before wheel zoom; otherwise the article scrolls normally. Floating viewers always handle wheel zoom inside their image area.
  • In the focused image area, + / − zoom, 0 fits, and arrows pan.
  • Expand opens an inline viewer; the floating toolbar has fullscreen (where the browser supports it) and close controls.
  • Escape closes the floating viewer and restores focus and reading position. In browser fullscreen, Escape exits fullscreen first.

Group ordinary images into a floating gallery with the existing attribute:

![First layout](images/first.png){group="layouts"}

![Second layout](images/second.jpg){group="layouts"}

Use previous/next buttons to switch; each image starts at Fit. Galleries loop by default; lightbox: {match: auto, loop: false} disables looping. Expanding an inline viewer stays on that image rather than switching away from its state. Single-finger swipes pan; they do not change gallery images.

Mermaid diagrams

Unwrapped Mermaid blocks keep Quarto’s native rendering and have no Askr viewer controls. To add a floating viewer button below a diagram, wrap exactly one native Mermaid block:

::: {.askr-mermaid-view view-label="View diagram"}
```{mermaid}
flowchart LR
  Reader --> Diagram
```
:::

view-label is optional and defaults to View diagram. The floating viewer reuses the image viewer’s zoom, pan and Fit controls, plus fullscreen where available and close with focus restoration.

The Mermaid source disclosure is adjacent to the viewer button below the graph. Open it to reveal the authored block in a scrollable code frame; its text Copy button sits at the frame’s upper right and preserves the original line breaks. After a successful copy, the button itself shows Copied! with a green outline for about two seconds, then returns to Copy. Askr adds no second static source block or search-index entry. Quarto’s native Mermaid source visibility and indexing remain unchanged.

Each wrapper contains one Mermaid block. Mermaid has no inline viewer mode.

This works only with Quarto’s native Mermaid blocks in HTML output when the browser renders the diagram; image-rendered Mermaid (for example, when mermaid-format produces an image) fails with an incompatibility error during rendering. It is not a GDS viewer and does not promise image-quality enhancement. With JavaScript disabled, the page keeps Quarto’s native Mermaid behavior without Askr viewer controls.

Limits and migration

This replaces Askr’s former GLightbox interface. Existing shortcode names, image eligibility, captions and groups remain. GLightbox-specific effect, desc-position and css-class settings are not supported; remove them before rendering. Description text is displayed as text, never executable HTML.

Images retain their own colors in both themes. SVG is loaded as an image, not injected into the page. This is not a GDS viewer and has no layer selection, measurement or resolution enhancement. A failed load shows an error and Retry; closing and gallery navigation remain available.

Without JavaScript, images and source links remain available without interactive controls. Non-HTML output retains ordinary images and image/figure links.

Try the Figures examples.