来自 figcaption 的 Featherlight Lightbox 字幕

Posted 2023-03-17

【中文标题】来自 figcaption 的 Featherlight Lightbox 字幕

【英文标题】：Featherlight Lightbox Captions from figcaption

【发布时间】：2017-08-27 16:06:57

【问题描述】：

我正在尝试使紧跟在标签之后的内容显示为羽毛画廊中的标题。我已经找到并有从 alt 或 title 属性中提取标题的工作示例，但理想情况下希望羽毛标题与相应的样式和结构一致（因为 alt 和标题不允许换行） .

任何帮助将不胜感激！

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

        <a href="img/image-1.jpg" href="#"><img  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  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  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'));
    ;

【参考方案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，这与您在使用figuretag 时只有一张图片有些不同