ckportfolio.com - Plugin: Featherlight

Plugin: Featherlight

HTML and CSS

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:

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 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:

Initialization

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:

Screencast Recording

https://drive.google.com/open?id=1pF0HYeIUOsCJpcmJfEdzsT_2Nu8Q9uqd

Fin