featherlight gallery afterContentへのリンクの追加方法

Question

afterContent functunalityを使用して、ギャラリーにキャプションを追加します。

<script> 
$(document).ready(function(){ 
    $('.all-imgs').featherlightGallery({ 
    filter: ".img-box-img a", 
    afterContent: function() { 
     var caption = this.$currentTarget.find('img').attr('data-caption'); 
     this.$instance.find('.caption').remove(); 
     $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content')); 
    }, 
    variant: "featherlight-gallery2", 
    }); 
}); 
</script> 

はどのようにブラウザがリンクとしてそれらをレンダリングするようにimg要素内のリンクdata-caption属性をエスケープする必要がありますか？

私の使用目的は、ギャラリーにフルサイズの画像へのリンクを追加することです。

おかげ

Answer 1

あなたdata-caption属性はHTMLが含まれている場合は、あなたの完全な例では.html(caption)

から.text(caption)への呼び出しを変更します。

<script> 
$(document).ready(function(){ 
    $('.all-imgs').featherlightGallery({ 
    filter: ".img-box-img a", 
    afterContent: function() { 
     var caption = this.$currentTarget.find('img').attr('data-caption'); 
     this.$instance.find('.caption').remove(); 
     $('<div class="caption">').html(caption).appendTo(this.$instance.find('.featherlight-content')); 
    }, 
    variant: "featherlight-gallery2", 
    }); 
}); 
</script>