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);
        }
    }
});

如果它们都不存在，那么alt的{{1}}将保留为空，就像在模板中一样。

参见 JSFIDDLE

Answer 2

此代码适用于每个选定（点击）元素，为fancybox-content内的图像添加和添加alt属性

jQuery('a.fancybox').fancybox({'hideOnContentClick':true,
    'titleShow':true,

    'onComplete' : function(links, index){
        var self = $(links[index]);
        var imageHtml = self[0];
        var alt = $(imageHtml).find("img").attr("alt");
        jQuery("#fancybox-wrap #fancybox-content #fancybox-img").attr('alt', alt);

    },
});

Fancybox 2.1.4 alt属性缺失

2 个答案: