In this post, I am going to show you how to install and use Five Number Lightbox, a small WordPress plugin I wrote to open post images in an overlay instead of loading the raw file in a new page.
I wrote it because the lightbox plugin running on this blog had been abandoned since 2017 and was closed on WordPress.org. Rather than hunt for a replacement that loads jQuery and a settings screen, I wrote a small one. It is about 12KB, it loads no libraries, and there is nothing to configure.
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.
That is the whole setup. There is no settings page, no wizard and no “get started” screen. Open any post with an image in it and click the image.
If you are moving from another lightbox plugin, deactivate the old one first. If both are active they will both react to the same click and you will get two overlays fighting each other.
You do not need to change your posts
This is the part that matters if you have years of old posts. The plugin works with the markup that is already in your content. There are three cases and it handles all of them.
An image with no link at all. This is what the block editor gives you by default. The plugin finds the full-size file from the media library and opens that.
An image linked to its media file. This is what you get from Link to > Media File in the editor, and it is what most old lightbox plugins expected. Works as it is.
An image already carrying rel="lightbox[group]". Some older plugins wrote this into post content. It is left exactly as it is, so the grouping you published with still works.
So in practice you deactivate the old plugin, activate this one, and your old posts carry on working. I tested this on posts here going back to 2010.
Why some images do not open
Four cases are skipped on purpose:
- The image is already at full size. There is nothing bigger to show, so an overlay would only be an extra click.
- The image is under 400px wide. Usually an icon or a logo.
- The image is not in your media library. If you pasted a URL from another site there is no larger version to find.
- You linked the image somewhere yourself. Your link wins. I am not going to hijack a link you deliberately added.
That last one trips people up, so it is worth saying plainly. If your image links to a product page, clicking it goes to the product page, not to a lightbox.
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();
} );The thing to note is that 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
All the images in a post form one set, so you can move between them:
- Left and Right arrows move between images.
- Esc closes.
- On a phone, swipe left and right. A vertical drag is ignored so scrolling does not page through your images.
- Closing puts you back where you were on the page, which sounds obvious but a lot of overlays drop you back at the top.
Ctrl-click and Cmd-click still open the image in a new tab, the way you would expect.
That is everything. Install it, click an image ?