Five Number Lightbox

Description

Click an image in a post and it opens in an overlay instead of loading the raw file in a new page.

The plugin is about 12KB in total and loads no libraries. No jQuery, no framework, no external requests, no tracking, no settings page to configure before it does anything. On a page with no eligible images, neither the CSS nor the JavaScript is loaded at all.

Step-by-step instructions, including how to move over from an older lightbox plugin: Five Number Lightbox – setup and usage

It works without editing your posts

Most lightbox plugins need your images marked up a particular way. This one handles what is already there:

• Images inserted with no link at all, which is what the block editor produces by default. The full-size file is found automatically.
• Images linked to their media file.
• Images already carrying the classic rel="lightbox[group]" markup that several older lightbox plugins wrote into post content. These are left exactly as they are, so a site with years of old posts keeps the grouping it was published with.

Images in the same post form a set, so you can page through them with the arrow keys or the on-screen arrows.

It does not rewrite your HTML

Attributes are added to tags that already exist. Nothing is wrapped, moved or re-nested, so the page structure stays exactly as you wrote it. Images inside <picture> elements keep working, links you added yourself are never hijacked, and an image inside a link keeps going where you pointed it.

Parsing is done with WordPress’s own HTML API rather than regular expressions, so quoting and unusual attribute values are handled correctly.

It tries not to get in the way

• Images already displayed at full size are skipped. There is nothing to enlarge, so an overlay would just be an extra click.
• Images smaller than 400px wide are skipped, since those are usually icons or logos.
• If the full-size file is missing, the overlay closes and the browser follows the link normally rather than trapping the reader behind a dark screen.
• Ctrl-click, Cmd-click and middle-click still open the image in a new tab.

Keyboard and accessibility

• Esc closes, left and right arrows move between images.
• Focus moves into the overlay when it opens, stays inside it while open, and returns to the image you clicked when it closes.
• The dialog is exposed with role="dialog" and aria-modal, and the image counter is announced.
• prefers-reduced-motion is respected.

Mobile

Swipe left and right to move between images. Vertical drags are ignored so scrolling does not page the set. Your place on the page is kept when the overlay closes. Neighbouring images are not preloaded when the browser reports that the reader has asked to save data.