Advertisements

WP Featherlight: the best lightbox plugin

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.

An example of WP Featherlight
Click on this image to see how WP Featherlight works

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.

Enabling an image to be opened with WP Featherlight
The only setting you have to adjust

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).

WP Featherlight working in Internet Explorer 11
It even works in Internet Explorer…

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&amp;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.

About Liam Alexander Colman

Liam Alexander Colman has been working with GeneratePress for over two years and has built countless WordPress websites using it. In his personal setting, Liam maintains six websites. While not a developer, he has created innumerable GeneratePress Elements and is well versed in customizing the theme to his liking. Visit this link for more information and a showcase of his work.

Leave a comment

Advertisements