Question

我正在努力使标签显示为一个标签，作为一个featherlight图库中的标题。我发现并且有一些工作示例，从alt或title属性中提取标题，但理想情况下，它应该与相应的样式和结构保持一致（因为alts和标题不允许换行）

任何帮助将不胜感激！

<figure data-featherlight-gallery data-featherlight-filter="a">

        <a href="img/image-1.jpg" href="#"><img alt="image 1" data-src="img/alex-fischer-sea-i-s.jpg"  src="p.wbm" /></a>
        <figcaption><em>image 1</em>, <br/>With additional lines<br/>of text</figcaption>

        <a href="img/image-1-detail.jpg" href="#"><img alt="image 1 detail" src="icon.png"/></a>
        <figcaption><em>image 1 detail</em>, <br/>With additional lines<br/>of text</figcaption>

        <a href="img/image-1-install.jpg" href="#"><img alt="image 1 install" src="icon.png"/></a>
        <figcaption><em>image 1</em>, <br/>With additional lines<br/>of text</figcaption>

</figure>

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

Answer 1

我知道这篇文章很老，但我发现它正在寻找如何解决相同需求的想法。

我正在使用data-caption而不是html figcaption，但我的解决方案可能会进行轻微修改以满足您的需求。

$.featherlightGallery.prototype.afterContent = function() {
    /* This is what I need because I'm using data-caption on <a> tag
    * var caption = this.$currentTarget.data('caption'); 
    */
    var caption = this.$currentTarget.parent().find($('.figure-caption')).html();
    this.$instance.find(".caption").remove();
    $('<span class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
};

此代码与此笔中的html标记有关 https://codepen.io/faridsilva/pen/VyPpzb，与您的figure标记仅使用一个图像

存在一些差异

来自figcaption的Featherlight灯箱字幕

1 个答案: