0

私はJQueryをいじっています（私は非常に初心者です）が、問題に遭遇しました。

サムネイルをクリックすると、表示されているメイン画像が変更されるシンプルな画像ギャラリーを作成しています。これに伴い、サムネイルのセットと大きな画像の両方の間をスワイプする矢印を追加しました。

すべてのスクリプトは個別に動作し、スライド矢印スクリプトは連携して動作しますが、3 つすべてを一緒に使用すると、最初はイメージ チェンジャーが動作し、他のスクリプトのいずれかを使用するとすぐに動作を停止します。

なぜこれが起こっているのかわかりません、誰か助けてくれますか？

以下のコード:

http://jsfiddle.net/ugPX7/

JQuery:

function thumbClick() {
/*$('#gallery img').click(function() {
    var imgSrc = $(this).attr('src').replace('thumbs/','')
    $('#largeImage').fadeOut(750, function(){
          $(this).attr('src',imgSrc).bind('onreadystatechange load', function(){
             if (this.complete) $(this).fadeIn(750);
          });  
    });
});*/

$("#gallery img").click(function () {
    var imgSrc = $(this).attr("src").replace('thumbs/', '');
    $("#largeImage").attr("src", imgSrc);
});
}


function thumbGallery() {
if ($("#gallery").length) {

    // Declare variables
    var totalImages = $("#gallery > li").length,
        imageWidth = $("#gallery > li:first").outerWidth(true),
        totalWidth = imageWidth * totalImages,
        visibleImages = Math.round($("#gallery-wrap").width() / imageWidth),
        visibleWidth = visibleImages * imageWidth,
        stopPosition = (visibleWidth - totalWidth);

    // Set gallery to width of all images    
    $("#gallery").width(totalWidth);

    // Navigation buttons   
    $("#gallery-prev").click(function (event) {
        if ($("#gallery").position().left < 0 && !$("#gallery").is(":animated")) {
            $("#gallery").animate({
                left: "+=" + imageWidth * 2 + "px"
            }, 1000);
        }
        event.preventDefault();
    });

    $("#gallery-next").click(function (event) {
        if ($("#gallery").position().left > stopPosition && !$("#gallery").is(":animated")) {
            $("#gallery").animate({
                left: "-=" + imageWidth * 2 + "px"
            }, 1000);
        }
        event.preventDefault();
    });
}
}

function mainGallery() {
if ($("#panel").length) {

    // Declare variables
    var totalI = $("#panel > li").length,
        imageW = $("#panel > li:first").outerWidth(true),
        totalW = imageW * totalI,
        visibleI = Math.round($("#panel-wrap").width() / imageW),
        visibleW = visibleI * imageW,
        stopP = (visibleW - totalW);

    // Set gallery to width of all images    
    $("#panel").width(totalW);

    // Navigation buttons   
    $("#panel-prev").click(function (event) {
        if ($("#panel").position().left < 0 && !$("#panel").is(":animated")) {
            $("#panel").animate({
                left: "+=" + imageW + "px"
            }, 1000);
        }
        event.preventDefault();
    });

    $("#panel-next").click(function (event) {
        if ($("#panel").position().left > stopP && !$("#panel").is(":animated")) {
            $("#panel").animate({
                left: "-=" + imageW + "px"
            }, 1000);
        }
        event.preventDefault();
    });
}
}

$(document).ready(function () {
    thumbClick();
    mainGallery();
    thumbGallery();

});

前もって感謝します！

4

0 に答える 0