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标签（或title标签）？

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

$("[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'));
  }
});

这是一个有效的codepen问题

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 的作者，我怎么能不给出正确答案呢？相信我:)

Fancybox alt 标签循环

Fancybox alt tag loop

html

jquery

fancybox-3