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属性中转义链接，以便浏览器将它们呈现为链接？

我的用例是在图库中添加指向fullsize图像的链接。

由于

Answer 1

如果您的data-caption属性包含HTML，请将通话更改为.text(caption)至.html(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>

如何在afterContent中添加指向featherlight gallery的链接

1 个答案: