如何为 fancybox 图像插入 alt 标签 [fancyBox 3]？

Question

我们正在使用 http://fancyapps.com/fancybox/3/ . And this fancybox is working good , except this is not showing img alt tag by default . Even in the documentation also it is not correctly described http://fancyapps.com/fancybox/3/docs/ .

这是我们的 html 结构，在这里我们在 a 和 img 中都提到了 alt 标签。但似乎没有任何效果。

<a data-fancybox="gallery" class="img-1" data-caption="First img" href="img.jpg" data-alt="first img"  data-options='{"alt" : "First img"}'><img src="img.jpg"  alt="First img" class="gallery-fac"></a>

<a data-fancybox="gallery" class="img-2" data-caption="second img" href="img-2.jpg" data-alt="second img"  data-options='{"alt" : "Second img"}'><img src="img-2.jpg"  alt="second img" class="gallery-fac"></a>

$("[data-fancybox]").fancybox({
            thumbs : {
                autoStart : true
            },

 });

我们找到了一个解决方案

 beforeShow : function() {
        var alt = this.element.find('img').attr('alt');

        this.inner.find('img').attr('alt', alt);

       }

但是这个解决方案不起作用，所以我们正在寻找解决方案并找到了一些旧的解决方案。

所以有知道怎么做的请帮忙解决

Answer 1

只需使用 afterLoad 回调即可获取点击的元素 (current.opts.$orig)。然后获取 alt 属性的值（在此示例中，我从缩略图获取）并为图像设置：

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

演示 - https://codepen.io/anon/pen/QOBgqz?editors=1010

顺便说一句，这对你来说真的很重要吗？如果图片未加载，则会显示错误消息，用户也不会看到此替代文本。

Answer 2

添加 afterLoad 事件对我有用，但仅限于此：

afterLoad: function (instance, current) {
      current.$image.attr("alt", $(current.opts.$orig[0]).prop("alt"));
    },

如何为 fancybox 图像插入 alt 标签 [fancyBox 3]？

How to insert alt tag for fancy box images [ fancyBox3 ]?

html

javascript

jquery

jquery-plugins

fancybox