如何为精美的盒子图像插入alt标签[fancyBox3]?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何为精美的盒子图像插入alt标签[fancyBox3]?相关的知识,希望对你有一定的参考价值。

我们正在使用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') );
  }
});

但是ーzxsw poi

顺便问一下,这对你来说真的很重要吗?如果图像未加载,则会显示错误消息,并且用户无论如何都不会看到此替代文本。

另一答案

期待做同样的事情。适用于单个图像,但不适用于多个图像的库。有关如何处理的任何想法?

以上是关于如何为精美的盒子图像插入alt标签[fancyBox3]?的主要内容,如果未能解决你的问题,请参考以下文章

如何为图像及其相应标签构建 TensorFlow 输入管道

如何为图像分类中的马赛克增强创建类标签?

如何为 xib 文件的 2 个图像之间的 2 个标签实现约束

如何为 softmax 分类指定 onehot 标签数组的形状?

如何为较小的屏幕调整图像大小?

如何为提及和主题标签修复此正则表达式?