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

このコードは、選択された (クリックされた) 要素ごとに機能し、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);

    },
});
于 2016-09-14T12:28:44.647 に答える