As with I discovered with social share plugins previously, there is seemingly no end to the list of lightbox plugins for WordPress. After testing multiple options, I’ve come to the conclusion that WP Featherlight is the lightbox plugin to beat (for now). As a GeneratePress user, my criteria for rating the lightbox plugins were mainly based on speed, ease-of-use, and how the minimalistic the design was.
A lightbox plugin will overlay an image on the current page when a visitor clicks on it. Generally, they will also dim the parts of the website you can still see to minimize distractions. It’s better than linking to the media file as no new tab is opened and despite being able to get a better look at your image, the visitor stays on the same page and can get right back to reading once they’re done.
Minimal code makes a fast lightbox plugin
What WP Featherlight essentially does is integrate the Featherlight.js lightbox in to WordPress. Featherlight.js is a very lightweight jQuery lightbox weighing in at only 6 kB. Those 6 kB are made up of just 400 lines of JavaScript and 100 lines of CSS and nothing more.
Despite that, Featherlight.js will adapt to the visitor’s screen size, supports AJAX and iframes out of the box and can be adapted to anyone’s need. In this case, it has been adapted to be a WordPress plugin named WP Featherlight, which requires exactly no configuration.
WP Featherlight only requires an installation
You read that right, WP Featherlight requires no configuration and it starts working as soon as you’ve finished the installation and have activated it. It doesn’t appear anywhere in the WordPress menu, making it not only a minimal plugin for the visitor but also the administrator.
When installed, the plugin will automatically display all standard WordPress images and galleries that have been correctly linked in a simple and minimalistic yet functional lightbox. At the bottom of the lightbox it will even display the image’s caption.
For WordPress images and galleries to be displayed in a lightbox when clicked on, you need to select the ‘Media File’ option when clicking on the link icon in the WordPress block editor.
With that done, you can save and view your post. When you hover over the image you’ve just adjusted, you will see the cursor change in to a magnifying glass. Click on it and, as expected, the image will open in a lightbox.
WP Featherlight customisability
Despite no having any settings for you to change, there is the possibility to customize WP Featherlight if you know your way around filters. For example, filtering all wp_featherlight_captions
to false will disable the caption from being shown at the bottom of the lightbox.
WP Featherlight browser compatibility
WP Featherlight should work on any modern browser (Chrome, Firefox, Edge, and Safari) and will even work in Internet Explorer 8 and upwards. I’ve only been able to test it in Internet Explorer 11 because I have no desire for anything older than that to infect my computer.
While many other plugins don’t work in IE11, WP Featherlight does indeed still show the image and has all the features you see in modern browsers (e.g. responsiveness and displaying the caption).
Display anything in the WP Featherlight lightbox
While you might be thinking that a lightbox is only good for images and galleries, WP Featherlight doesn’t just support images but also iframes, AJAX content and YouTube videos. As previously shown with the images, you don’t have to change any WP Featherlight settings for it to work (because there aren’t any) but you do have to adjust the link to the content.
For example, if you click on this link a YouTube video in a lightbox will appear, which was implemented using the following code:<a href="https://www.youtube-nocookie.com/embed/jDGGZLGcKhM?rel=0&autoplay=1" data-featherlight="iframe" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-style="display:block;border:none;height:85vh;width:85vw;overflow:invisible;">For example, if you click on this link a YouTube video in a lightbox will appear, which was implemented using the following code:</a>
The perfect lightbox for GeneratePress
WP Featherlight is the perfect lightbox plugin for GeneratePress. It has no bulk, it doesn’t mess up your backend, and does what it should do. In most cases, a lightbox plugin doesn’t need many extras; it just has to work. And WP Featherlight is that plugin.
While I have been talking about GeneratePress in this article, after all, that is the main topic of this website, WP Featherlight will work with any theme. As long as you can correctly link the images you’re good to go. And if that shouldn’t work, you still have the option of creating links manually.