- Plugin: Featherlight

Plugin: Featherlight


Featherlight ( is one of many popular light box plugins that allow us to dynamically toggle modal windows. We can use this plugin to open a larger version of each photo gallery item upon click. In this tutorial, we will explore a single example.

We can build an <a> tag in each box item, and ensure that it encompasses the entire box by using CSS:

We can confirm that the <a> element does indeed cover the entire photo gallery entry:

Making a connection

Featherlight does not come in a single path, but two: JS (behaviour) and CSS (style) modules. You can simply visit the CDN website at and copy over the two paths. Note that you must copy over the files whose names start with featherlight.min, not


Just like Cycle 2 and Isotope, Featherlight also requires a specific HTML marking to become active. Refer to the available documentation ( and the screenshot below:

Note that the <a> tag now has a proper href attribute, along with the new data-featherlight attribute. This informs the plugin that this is an image, and should be treated as such. You can also remove the background colour attached to the tag:

Upon load, you can now see that the hyperlink toggles the modal window as intended:

Screencast Recording