1

我正在使用 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="" />',
});
4

2 回答 2

0

你可以做这样的事情，将数据属性添加到 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'));
  }
});

这是解决该问题的有效代码笔

于 2017-04-23T03:25:50.160 回答
-1

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

于 2017-04-24T16:05:51.233 回答