Jak dodać tekst opisu w galerii obrazów FeatherLight?

Question

Próba znalezienia sposobu dodania opisu tekstowego do galerii obrazów lightlight featherlight.js. Czy ktoś wie lub ma jakieś doświadczenie?

Oto przykład, w jaki sposób HTML jest określone: ​​

<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 wiele więcej zdjęć

Chciałbym tylko, aby móc dodać trochę tekstu jako opis zdjęć w polu światła, kiedy się otwierają i nie mogę tego znaleźć w dokumentacji.

Jeśli nie, czy ktoś wie o dobrym/lekkim lightboxie, który mógłby to osiągnąć?

Answer 1

featherlight ma być lekki i nie ma do tego wbudowanej opcji, ale można to łatwo zrobić za pomocą wywołania zwrotnego afterContent.

Na przykład, wyobraźmy sobie, że tekst jest w atrybucie znacznika a'alt', można określić:

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

Oto working example.