How to add description text to FeatherLight image gallery?

Question

Trying to figure out how to add a text description to the featherlight.js photo gallery gallery. Does anyone know or have any experience?

Here is an example of how html is laid out:

<div class="mix digital" data-myorder="12" style="display: inline-block;"> <a class="gallery2" href="gallery_images/design/woodcut.jpg"> <div class="thumbnail" style="background-image:url(gallery_images/design/woodcut_th.jpg);"></div></a> </div> <div class="mix digital" data-myorder="11" style="display: inline-block;"> <a class="gallery2" href="gallery_images/design/script.jpg"> <div class="thumbnail" style="background-image:url(gallery_images/design/script_th.jpg);"></div></a> </div> 

... plus many more images

I just wanted to add some text as a description of the images in the light box when they open, and I cannot find this in the documentation.

If not, does anyone know of a good / bright lightbox that could do this?

Answer 1

featherlight tends to be lightweight and doesn't have a built-in option for this, but it's easy to do with an afterContent .

For example, imagine that your text is in the 'alt' attribute of a tag a , you can specify:

 afterContent: function() { // Add a div for the legend if needed: this.$legend = this.$legend || $('<div class="legend"/>').insertAfter(this.$content); // Set the content: this.$legend.text(this.$currentTarget.attr('alt')); } 

Here is a working example .