Featherlight (https://noelboss.github.io/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:
Featherlight does not come in a single path, but two: JS (behaviour) and CSS (style) modules. You can simply visit the CDN website at https://cdnjs.com/libraries/featherlight and copy over the two paths. Note that you must copy over the files whose names start with featherlight.min
, not featherlight.gallery.min
:
Just like Cycle 2 and Isotope, Featherlight also requires a specific HTML marking to become active. Refer to the available documentation (https://github.com/noelboss/featherlight/#usage) 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:
https://www.dropbox.com/scl/fi/ugkdwykd33dh5eh8zzk5g/Page-4.mov?rlkey=kjol7w5izu0sh6tqog2kv63pv&dl=0