Hinzufügen von Bildunterschriften zu Featherlight

Question

Ich las this, um dem Leuchtkasten Text hinzuzufügen. Ich habe diesen recht einfachen HTML-Code:

<div class="icon-click-img"> 
    <a href="img.jpg" data-featherlight="image" > 
    <img src="some-icon.png" height="83" width="83" /> 
    </a> 
</div> 
<img class="img-responsive" src="img.url" alt="alt"> 

Wenn ich so etwas hinzufügen wollte:

<script> 
    jQuery.featherlightGallery.prototype.afterContent = function() { 
    var caption = this.$currentTarget.find('img').attr('alt'); 
    this.$instance.find('.caption').remove(); 
    $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content')); 
    }; 
</script> 

Ich bin mir nicht sicher, wie es funktionieren würde, weil das Leuchtkasten Bild ein Link zu einem Bild ist, Daher hat es kein ALT-Tag. Wie kann ich Untertitel mit dem Code, den ich bereits habe, erscheinen lassen? Vielen Dank.

Answer 1

Späte Antwort, aber ich selbst suchte das.

Wie auch immer. Zunächst einmal, Bilder immer ein alt-Tag haben sollte (Screenreadern, scheiterte Bild zu laden, ...)

Arbeitslösung (Ich verließ alle meine PHP und Bootstrap-Code aus)

<div data-featherlight-gallery data-featherlight-filter="a"> 
    <a class="gallery" href="big_image.jpg"> 
     <img title="Small Image" src="small_image.jpg" alt="Small Image Caption" /> 
    </a> 
</div> 

<script> 
    $.featherlightGallery.prototype.afterContent = function() { 
     var caption = this.$currentTarget.find('img').attr('title'); 
     this.$instance.find('.caption').remove(); 
     $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content')); 
    } 
</script> 

Edit: Statt vom alt-Attribut bevorzugte ich das title-Attribut, aber es ist dasselbe. Sie können ein beliebiges Attribut auswählen. Ändern Sie einfach den Attr im Skript