Featherlight Lightbox Captions from figcaption

Question

I'm trying to make the that immediately follows an tag be displayed as the caption in a featherlight gallery. I've found and have working examples of the caption being pulled from the alt or title attributes but would ideally like the featherlight caption to be consistent with the style and structure of the corresponding (As alts and titles don't allow for line breaks).

Any help would be appreciated!

<figure data-featherlight-gallery data-featherlight-filter="a">

        <a href="img/image-1.jpg" href="#"><img alt="image 1" data-src="img/alex-fischer-sea-i-s.jpg"  src="p.wbm" /></a>
        <figcaption><em>image 1</em>, <br/>With additional lines<br/>of text</figcaption>

        <a href="img/image-1-detail.jpg" href="#"><img alt="image 1 detail" src="icon.png"/></a>
        <figcaption><em>image 1 detail</em>, <br/>With additional lines<br/>of text</figcaption>

        <a href="img/image-1-install.jpg" href="#"><img alt="image 1 install" src="icon.png"/></a>
        <figcaption><em>image 1</em>, <br/>With additional lines<br/>of text</figcaption>

</figure>

$.featherlightGallery.prototype.afterContent = function() {
        var caption = this.$currentTarget.find('img').attr('alt');
        this.$instance.find('.caption').remove();
        $('<span class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
    };

Answer 1

I know this post is old but I found it searching for ideas on how to solve same needs.

I'm using data-caption instead of html figcaption, but my solution could be slighty modified to meet your needs.

$.featherlightGallery.prototype.afterContent = function() {
    /* This is what I need because I'm using data-caption on <a> tag
    * var caption = this.$currentTarget.data('caption'); 
    */
    var caption = this.$currentTarget.parent().find($('.figure-caption')).html();
    this.$instance.find(".caption").remove();
    $('<span class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
};

This code is related to my html markup in this pen https://codepen.io/faridsilva/pen/VyPpzb, which has some differences from yours about using figuretag with only one image