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>