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 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

编辑：我对downvote感到惊讶 - 作为fancyBox的作者，我怎能不给出正确答案？请相信我:)。

Fancybox alt标签循环

2 个答案: