Wie fügt man Beschreibungstext in der FeatherLight Bildergalerie hinzu?

Question

Versucht herauszufinden, wie man featherlight.js lightbox image gallery eine Textbeschreibung hinzufügt. Weiß jemand etwas oder hat er Erfahrung?

Hier ist ein Beispiel dafür, wie die HTML-out gelegt:

<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 viele weitere Bilder

Ich möchte nur ein wenig Text als Beschreibung der Lage sein möchte hinzufügen der Bilder im Leuchtkasten, wenn sie sich öffnen und ich kann das in der Dokumentation nicht finden.

Wenn nicht, weiß jemand von einem guten/hellen Leuchtkasten, der das erreichen könnte?

Answer 1

featherlight zielt darauf ab, leicht zu sein und hat keine integrierte Option dafür, aber es ist einfach mit dem afterContent Rückruf zu tun.

Zum Beispiel vorstellen, dass Ihr Text in der 'alt' Attribut des a-Tag, können Sie angeben:

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

hier ein working example ist.