The Loupe,
brought to the browser.

The minimum markup: an <img> with the trigger attribute. Click any print below.

<img src="print.jpg"
     data-enlarge="true"
     data-enlarge-caption="Prints hung to dry, first pass"
     alt="Rows of hanging prints drying in a darkroom">

These thumbnails are served small. data-enlarge-src points the viewer at a much larger file, only fetched once you open it — the page itself never pays for the full-resolution download.

<img src="thumb-360.jpg"
     data-enlarge-src="full-2000.jpg"
     data-enlarge="true">

Instead of one fixed full-size file, data-enlarge-srcset and data-enlarge-sizes let the browser pick the right candidate for the viewport — the same way a native <img srcset> works, just applied to the enlarged view. Trigger images on this page also pick up loading="lazy" and decoding="async" automatically wherever the markup doesn't already set them.

<img src="thumb.jpg"
     data-enlarge-srcset="med.jpg 800w, large.jpg 1600w, xl.jpg 2400w"
     data-enlarge-sizes="90vw"
     data-enlarge="true">

Give a set of images the same data-enlarge-group value and the viewer adds prev/next arrows, a counter, a thumbnail filmstrip, and arrow-key navigation between them — open any frame and step through the roll. Try the rotate buttons on a frame, and the link icon in the toolbar to copy a URL straight to whichever image is open (reload the page with that link and it reopens to the same one). The transition between frames (step, fade, or slide) is set in the settings panel further down.

<img src="frame-1.jpg" data-enlarge="true" data-enlarge-group="contact-roll">
<img src="frame-2.jpg" data-enlarge="true" data-enlarge-group="contact-roll">
<!-- ...same group value, any number of frames -->

Watermarking is a site-wide setting in the real plugin (set once in the admin params, not per image). This panel below drives that same config through the URL's query string, so you can see how each setting changes viewer behaviour without a Joomla install. Open any print in this row and try the download button.

Download format (1.4.2). A watermarked download, and any download whose source is WebP or AVIF (a Shrinkray copy, say), is drawn on a canvas and saved as JPEG — several times smaller than PNG for a photo, and opens anywhere. If the source has transparent pixels it's saved as PNG instead, so a logo or cut-out keeps its transparency. A clean download of a JPG/PNG/GIF source is still the original file, byte for byte.

The Watermark tab above sets one watermark for the whole site. Two attributes let a specific image override that — a logo image for a guest contributor's print, or just a credit line — independent of the global on/off switch: an image carrying either attribute shows its own watermark even if watermarking is switched off site-wide. If an image carries both, the image override wins over text.

<img src="guest-print.jpg"
     data-enlarge="true"
     data-enlarge-watermark="Photo by J. Alvarez">

<img src="guest-logo-print.jpg"
     data-enlarge="true"
     data-enlarge-watermark-image="guest-logo.png">

The watermark image attribute is JPG/PNG only, same restriction as the global watermark image field in the Watermark tab — canvas compositing for watermarked downloads doesn't reliably support other raster formats. Position, opacity, size and margin still come from the Watermark tab either way; only the content is overridden per image.

SVG works as a regular enlargeable image throughout the viewer — zoom, pan, filmstrip, download — since it's rendered via a plain <img src> like any other format. Two places special-case it rather than assuming it behaves like a raster image: a watermarked download falls back to a clean, unwatermarked file for an SVG source (canvas compositing can't reliably size a vector source, and the export would be raster anyway, defeating the point of a vector file); and if the print popup is blocked, the direct-open fallback is skipped for SVG specifically, since navigating straight to an SVG file — unlike referencing it via <img> — lets the browser treat it as the top-level document, where an embedded <script> could execute.

<img src="contact-sheet.svg"
     data-enlarge="true"
     data-enlarge-caption="Vector contact sheet, SVG source">

Three more toolbar/output features, all driven by the same panel below as the watermark settings. Open any print in this row to see them in the toolbar.

• Print button — opens a distraction-free view of just the enlarged image in a new tab and triggers the browser's print dialog once it's loaded, rather than fighting the host page's own print styles. If the popup is blocked, it falls back to opening the image directly (except SVG — see Frame 07).
• Native share sheet — on devices that support the Web Share API (mostly mobile), the copy-link button opens the OS share sheet instead of only copying to the clipboard. Turn it off to always just copy the link; a cancelled share sheet is never treated as a failure, and any other failure falls back to the clipboard automatically.
• Schema.org structured data — off by default. When enabled, the plugin emits ImageObject JSON-LD for every enlargeable image on the page, which can help images surface in Google Image search. It only populates fields this plugin has reliable data for (image URL, caption, thumbnail URL) — it doesn't try to guess a photographer credit out of free-form watermark text.