Come aggiungere un testo di descrizione in FeatherLight Image Gallery?

Question

Cercando di capire come aggiungere una descrizione di testo alla galleria di immagini lightlight.js lightbox. Qualcuno sa o ha qualche esperienza?

Ecco un esempio di come l'html è disposto:

<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> 

... e molte altre immagini

Vorrei solo essere in grado di aggiungere un po 'di testo come una descrizione delle immagini nel light box quando si aprono e non riesco a trovarlo nella documentazione.

In caso contrario, qualcuno sa di una buona/light lightbox che potrebbe raggiungere questo obiettivo?

Answer 1

featherlight mira a essere leggero e non ha un'opzione integrata per questo, ma è facile da fare con il callback afterContent.

Per esempio, immaginate che il testo è l'attributo 'alt' del tag a, è possibile specificare:

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

Ecco un working example.