我们正在使用http://fancyapps.com/fancybox/3/ 。这个 fancybox 工作得很好,除了默认情况下不显示 img alt 标签。即使在文档中也没有正确描述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);
}
但是这个解决方案不起作用,所以我们正在寻找解决方案并得到了一些但已经过时了。
如果有人知道怎么做,请帮忙解决。
最佳答案
只需使用 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
顺便说一句,这对你来说真的很重要吗?如果图像未加载,则会显示错误消息,并且用户无论如何都不会看到此替代文本。
关于javascript - 如何为 fancybox 图像 [ fancyBox 3 ] 插入 alt 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47493849/