Five Number Lightbox: a Simple Image Lightbox Plugin

This lightbox plugin installed on the blog was abandoned in 2017 and had stopped working. In order to avoid searching for other plugins that load jQuery and the admin interface, I developed one myself. Five Number Lightbox displays post images within a pop-up window instead of loading the image itself within the page. It is less than 12KB in size and requires no libraries or configuration.

Try it here

Click the image below. This blog runs the plugin, so what you get is the real thing, not a recording of it.

Press Esc to close it, or click anywhere outside the image. If you got that, the plugin is working and the rest of this post is just the details.

Install it

Go to Plugins > Add New and search for Five Number Lightbox.
Click Install Now, then Activate.

This is all that there is to it. There is no settings panel and no wizard to walk through. Open any post that contains images and click the images.

If you are transitioning from a different lightbox plugin, turn off the other one first. This is because when two plugins are turned on and you click them both will react.

You do not need to change your posts

That’s the bit that counts if you’ve got years of posts. The plugin recognizes your existing markup. There are three situations, and it does all of them.

First, there’s an image with no link whatsoever. This is the one that comes out of the box when you use the block editor. The plugin detects the full-sized media file and uses that.

Next, there’s an image with a link to the media file. This is the one you get with Link to > Media File in the editor. This is what most lightbox plugins expected before.

An image that already had rel=”lightbox[group]”. This was added to the posts by some of the older plugins. It remains exactly the same so your grouping works.

Therefore, what happens is you turn off your old plugin, install this new plugin, and all of your old posts work just fine. I have tested this on posts from 2010.

Why some images do not open

Four types of images are purposely ignored:

The image is at maximum possible size. Since there is nothing larger, showing an overlay will be an unnecessary step.
The image is less than 400 pixels wide. Typically an icon or a logo.
The image is not present in your media gallery. If you’ve pasted the URL of the image from somewhere else, then there will be no other version of it available.
The image is linked by you elsewhere. In this case your link prevails. I’m not going to hijack your own link.

This one confuses people enough that it bears repeating. If your image links to some product page, clicking it will lead you to the product page, not to lightbox view.

Changing the 400px limit

If you want smaller images to open too, drop this in your theme’s functions.php or a small snippet plugin:

add_filter( 'fnlb_min_width', function () {
    return 250;
} );

Turning it off on certain pages

There are two filters. fnlb_enabled controls whether the CSS and JavaScript load at all, and fnlb_rewrite_content controls whether the image markup is touched.

add_filter( 'fnlb_enabled', function ( $enabled ) {
    return ! is_front_page();
} );

On a page with no images the plugin already loads nothing, so you do not need this just for performance. It is there for when you have a page where a lightbox actively gets in the way.

Keyboard and phone

Each image in a posting makes up one set; therefore, you can switch from one to another:

Left and Right arrows for switching among images.
Esc to exit.
On a mobile device, swipe left and right. Vertical swiping is disregarded so that the images won’t be switched while scrolling.
Exiting will return you to your previous position on a page, which may seem obvious, but many overlays just bring you to the top of a page.

Ctrl-click and Cmd-click will still open the image in a new tab as expected.

This is all there is. Install it, click an image