Featherlight Lightbox Bildunterschriften von figcaption

Question

Ich versuche, dass das folgt einem Tag als Beschriftung in einer federleichten Galerie angezeigt wird. Ich habe gefunden und habe Arbeitsbeispiele der Beschriftung, die von den alt- oder Titelattributen gezogen wird, aber würde im Idealfall mögen, dass die federleichte Beschriftung mit dem Stil und der Struktur der entsprechenden übereinstimmt (Da alte und Titel keine Zeilenumbrüche erlauben) .

Jede Hilfe wäre willkommen!

<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

Ich weiß, dass dieser Beitrag alt ist, aber ich fand es auf der Suche nach Ideen zur Lösung der gleichen Bedürfnisse.

Ich benutze data-caption anstelle von html figcaption, aber meine Lösung könnte leicht modifiziert werden, um Ihre Bedürfnisse zu erfüllen.

$.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')); 
}; 

Dieser Code zu meinem HTML-Markup in diesem Stift https://codepen.io/faridsilva/pen/VyPpzb, bezogen, die nur ein Bild mit ein paar Unterschiede von Ihnen über die Verwendung von figure Tag hat