1

Fancyboxをサムネイルギャラリーに適用して、メイン画像が読み込まれたときにクリックしてその画像の拡大版を開く方法について頭を悩ませています。

わからない、言葉は私を逃れる。具体的な例を次に示します。http：//bloc-nc.com/projects/gateway.html

ある親指から別の親指に切り替えると、開いた大きな画像はまだ最初の画像であり、新しい画像ではありません。

私のコードは次のようになります：

$('#thumbs').delegate('img','click', function(){                
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

$('#largeImage').wrap(function() {
    return '<a class="zoom" href="' + $(this).attr('src').replace('large','zoom') + '" />'});

私は何が欠けていますか？よろしくお願いします!!

4

1 に答える 1

1

別のアプローチはどうですか？... を使用する代わりに、イベントを各サムネイルにバインドし、コンテナー 内の大きな画像を置き換え.replace()ます。.each()click#panel

$("#thumbs img").each(function (i) {
    $(this).click(function () {
        var imgPanel = '<a href="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_zoom.png" class="zoom" tabindex="' + (i + 1) + '"><img src="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_large.png" id="largeImage" /></a>';
        $("#panel").html(imgPanel);
    }); // click
}); // each

ズーム画像 (タグ内) と大きな画像 (タグ内)の両方の数imgPanelを実際に置き換える変数を作成していることに注意してください。(i+1)href<a>src<img>

<div id="panel">次に、クリックされたサムネイルに応じて、コンテナーのコンテンツが置き換えられます。

一方、$("a.zoom").fancybox();fancybox を でリンクにバインドするのは簡単class="zoom"ですが、fancybox v1.3.4 を使用しており、そのバージョンは動的に追加された要素をサポートしていません。参照用にこの投稿を参照してください。

したがって、これらの動的要素をサポートするには、fancybox を別の方法で初期化する必要があります (大きな画像を置き換えるたびに、リンクを.zoom動的に変更します) 。

このスクリプトはトリックを行う必要があります:

$(".gallery").delegate("#panel", "focusin", function () {
    $("a.zoom").fancybox();
});

v1.7.x より前のバージョンの jQuery を使用しているため、参照の投稿では as の.delegate()代わりに使用していることに注意してください。.on()

というわけで、まとめて

$(document).ready(function () {
    $("#thumbs img").each(function (i) {
        $(this).click(function () {
            var imgPanel = '<a href="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_zoom.png" class="zoom" tabindex="' + (i + 1) + '"><img src="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_large.png" id="largeImage" /></a>';
            $("#panel").html(imgPanel);
        }); // click
    }); // each
    // initialize fancybox for dynamically added elements
    $(".gallery").delegate("#panel", "focusin", function () {
        $("a.zoom").fancybox();
    });
}); // ready

JSFIDDLEを参照してください

于 2013-03-19T21:54:22.463 に答える