How to add description text in FeatherLight Image Gallery?

Question

Trying to figure out how to add a text description to featherlight.js lightbox image gallery. Does anybody know or have any experience?

Here's an example of how the 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 would just like to be able to add a little bit of text as a description of the images in the light box when they open up and I can't find this in the documentation.

If not, does anybody know of a good/light lightbox that could achieve this?

Maun

Answer 1

featherlight aims to be light and doesn't have a builtin option for this, but it's easy to do with the afterContent callback.

For example, imagine that your text is in the 'alt' attribute of the a tag, you could 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's a working example.

Indispensable

use this.$legend.html() if you want to add html e.g a link or something. – Insanity