0

抱歉我的英语不好，我是法国人，我对新版本的 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) 我该如何解决这个问题？谢谢你的帮助。

4

2 回答 2

6

恐怕您必须将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

于 2013-03-22T18:06:43.197 回答
0

此代码适用于每个选定（单击）的元素，采用并添加 alt 属性到 fancybox-content 中的图像

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

    },
});
于 2016-09-14T12:28:44.647 回答