Fancybox 2.1.4 alt属性缺失

Question

抱歉我的英文不好,我是法国人,我对新版本的Fancybox有疑问.

我的图片的alt属性已正确插入到我的HTML中,但它没有出现在Fancybox的HTML代码中:

<div class="fancybox-inner" style="overflow: visible; width: 521px; height: 521px;"><img alt="" src="images_produits/gigoteuse-naissance-badou-z.jpg" class="fancybox-image"></div>

默认情况下,新版本模板上的alt属性为空:alt =""(jquery.fancybox.js)如何解决此问题？谢谢你的帮助.

Answer 1

我担心你必须将alt属性的值推入.fancybox-image选择器.

您可以从缩略图中的alt属性获取该值, img如:

<a href="big_image.jpg" class="fancybox"><img alt="one" src="thumb_image.jpg" /></a>

或者来自data锚点中的属性:

<a data-alt="alt for fancybox one" href="big_image.jpg" class="fancybox"><img alt="one" src="thumb_image.jpg" /></a>

然后使用beforeShow回调来设置它们中的任何一个.您可以优先考虑alt缩略图中的data属性或锚点中的属性,无论哪种方式更适合您:

$(".fancybox").fancybox({
    beforeShow: function () {
        var imgAlt = $(this.element).find("img").attr("alt");
        var dataAlt = $(this.element).data("alt");
        if (imgAlt) {
            $(".fancybox-image").attr("alt", imgAlt);
        } else if (dataAlt) {
            $(".fancybox-image").attr("alt", dataAlt);
        }
    }
});

如果它们都不存在,那么altof .fancybox-image将在模板中保持为空.

请参阅JSFIDDLE