Fancybox alt标签循环

Question

我使用的是Fancybox 3，我需要在呈现的弹出图像标记中插入一个alt标记(这个：)

<div class="fancybox-placeholder" style="transform: translate3d(311px, 44px, 0px); width: 454px; height: 318px; opacity: 1; transition: none 0s ease 0s ;">
    <img class="fancybox-image" src="pathtoimage/image.png" alt="This needs an alt tag but right now doesn't have one">
</div>

有办法这样做吗？

这是我的标记，在Jekyll循环：

<a class="fancybox" data-fancybox="{{ project.name }}" href="{{ path to image }}.png" data-caption="{{ site.blurb }}" title="{{ data[1] }}">
    <img src="{{ path to thumbnail }}.png" alt="{{ data[1] }}" />
</a>

{{ data[1] }}是我定义alt标记的地方。缩略图alt标记似乎覆盖了a标记中的标题。是否有一种方法可以使主图像弹出时，有一个alt标记(或标题标记)与其关联？

我试过了，但由于某种原因它不起作用：

$("[data-fancybox]").fancybox({
  image : '<img class="fancybox-image" src="{href}" alt="" />',
});

Answer 1

您可以这样做，向a标记添加一个数据属性

<a class="fancybox" data-fancybox="{{ project.name }}" href="{{ path to image }}.png" data-caption="{{ site.blurb }}" title="{{ data[1] }}" data-alt="{{data[1]}}">
    <img src="{{ path to thumbnail }}.png" alt="{{ data[1] }}" />
</a>

然后在这里

$("[data-fancybox]").fancybox({
  afterLoad: function (instance, slide) {
     $(".fancybox-image").attr("alt", slide.opts.$orig.data('alt'));
  }
});

下面是一个解决这个问题的工作码页

Answer 2

"xploshioOn“解决方案不能像预期的那样工作，因为每个库项都会调用afterLoad事件。因此，最后加载的图像将为每个图片库图像设置相同的alt值。

以下是更新的代码：

$("[data-fancybox]").fancybox({
  afterLoad: function (instance, slide) {
     slide.$slide.find('img').attr("alt", slide.opts.$orig.data('alt'));
  }
});

https://codepen.io/anon/pen/xdEPRZ?editors=1010

编辑:我对否决感到惊讶-作为“fancyBox”的作者，我怎么能不给出正确的答案呢？相信我:)