फेदरलाइट छवि गैलरी में विवरण टेक्स्ट कैसे जोड़ें?

Question

featherlight.js लाइटबॉक्स छवि गैलरी में टेक्स्ट विवरण जोड़ने का तरीका जानने का प्रयास करें। क्या किसी को पता है या कोई अनुभव है?

यहाँ कैसे एचटीएमएल किया गया है, एक उदाहरण है:

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

... प्लस और कई अन्य चित्र

मैं सिर्फ एक विवरण के रूप में पाठ का एक छोटा सा जोड़ने में सक्षम होना चाहते हैं जब वे खुलते हैं तो प्रकाश बॉक्स में छवियों में से और मुझे दस्तावेज़ में यह नहीं मिल रहा है।

यदि नहीं, तो क्या किसी को एक अच्छा/हल्का लाइटबॉक्स पता है जो इसे प्राप्त कर सकता है?

Answer 1

featherlight का लक्ष्य हल्का होना है और इसके लिए एक बिल्टिन विकल्प नहीं है, लेकिन afterContent कॉलबैक के साथ करना आसान है।

उदाहरण के लिए, मान लें कि आपकी पाठ a टैग की 'alt' विशेषता में है, तो आप निर्दिष्ट कर सकते हैं:

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

यहाँ एक working example है।