mehr als eine Beschriftung mit Federlicht?

Question

ich bin mit featherlight.js für Bildergalerien und verwendet diesen Code für Bildunterschriften:

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

jetzt ein Kunde will eine zweite Beschriftung hinzufügen, die nur Copyright-Informationen auf der rechten Seite der Galerie-Bilder enthält. ist es möglich, zwei Untertitel zu haben, eine mit dem Namen .caption und die zweite vielleicht .copyright?

Ich habe bereits versucht mit "data-caption =" und eine einfache Kopie der oben genannten js-initial, aber es ist fehlgeschlagen.

irgendwelche Ideen? danke im voraus und frohe weihnachten!

Answer 1

Sie könnten ein Datenattribut verwenden.

$.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')); 

    var copyright = this.$currentTarget.find('img').data('copyright'); 
    this.$instance.find('.copyright').remove(); 
    $('<div class="copyright">').text(copyright).appendTo(this.$instance.find('.featherlight-content')); 
}; 

Dann in Ihrem Markup

<img src="..." alt="my caption text" data-copyright="my copyright text"> 

und in Ihrem css

.copyright { 
    float: right; 
} 

oder etwas zu bieten, hinzuzufügen.

Wenn Sie eine Bedingung benötigen, können Sie nach der Definiertheit und/oder Länge des Attributs data-copyright suchen.