2.1.4的fancybox alt属性缺失 [英] Fancybox 2.1.4 alt attribute missing

问题描述

对不起我的英文不好，我是法国人，我有跟的fancybox的新版本中的问题。

Sorry for my bad english, I'm French and I have a problem with the new version of Fancybox.

我的形象的alt属性正确地插入我的HTML，但它不会出现在的fancybox的HTML code：

The alt attribute of my image is correctly inserted on my HTML but it don't appear on the HTML code of Fancybox :

<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）
我怎样才能解决这个问题？感谢您的帮助。

By default the alt attribute on template of the new version is empty : alt="" (jquery.fancybox.js) How can I fix this problem ? Thanks for your help.

推荐答案

恐怕你要推的 ALT 属性到 .fancybox图像选择。

I am afraid you have to push the value of the alt attribute into the .fancybox-image selector.

您可以得到该值可能来自像你的 IMG 缩略图 ALT 属性：

You could get that value either from the alt attribute in your img thumbnail like :

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

或从数据在你的锚状属性：

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

然后使用 beforeShow 的回调来设置他们的任何。你可以给一个优先考虑你的缩略图或将数据在你的锚属性 ALT 属性，不管工作得更好为你 ：

then use the beforeShow callback to set either of them. You can give a priority to the alt attribute in your thumbnail or to the data attribute in your anchor, whatever works better for you :

$(".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 .fancybox图像将保持空的，因为模板

If none of them exists, then the alt of .fancybox-image will remain empty as in the template.

请参阅 的jsfiddle

See JSFIDDLE

这篇关于2.1.4的fancybox alt属性缺失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！