Question

我正在阅读this以向灯箱添加标题文字。我有这个相当简单的HTML代码：

<div class="icon-click-img">
  <a href="img.jpg" data-featherlight="image" >
    <img src="some-icon.png" height="83" width="83" />
  </a>
</div>
<img class="img-responsive" src="img.url" alt="alt">

如果我想添加以下内容：

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

我不确定它是如何工作的，因为灯箱图像是图像的链接，因此它没有ALT标记。如何使用我已有的代码显示标题？谢谢。

Answer 1

迟到的回复，但我自己也在寻找。

总之。首先，图像应始终具有alt标记（屏幕阅读器，图像无法加载，...）

工作解决方案（我遗漏了所有的php和bootstrapping代码）

<div data-featherlight-gallery data-featherlight-filter="a">
    <a class="gallery" href="big_image.jpg">
        <img title="Small Image" src="small_image.jpg" alt="Small Image Caption" />
    </a>
</div>

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

编辑：而不是alt属性我更喜欢title属性，但是，它是相同的。您可以选择任何属性。只需更改脚本中的attr

即可

为Featherlight添加字幕

1 个答案: