0

画像ギャラリーのスクリプトに問題があります。この問題は Safari と Chrome でのみ発生するようですが、ページを更新すると正しく動作するようになります。

正しい機能: ギャラリーにはトップ バーがあり、カーソルを合わせるとキャプションが表示されます。以下はメイン画像です。下部には、上部バーの反転である別のバーがあります。カーソルを合わせると、ギャラリーのサムネイルが表示されます。

問題: Safari と Chrome では、サムネイル ホルダーが表示されません。実際、それはアクティブなアイテム (またはロールオーバー) としてさえ表示されません。しかし奇妙なことに、ページを手動で更新すると、ページを表示している残りの時間は正しく機能し始めます。ページを離れて戻ると、同じエラーが再び発生し、同じプロセスを実行する必要があります。

注目すべきページの 1 つを次に示します: リンク テキスト

CSSは次のとおりです。

#ThumbsGutter {
background: url(../Images/1x1.gif);
background: url(/Images/1x1.gif);

高さ: 105px; 左: 0px; 位置: 絶対; 上: 0px; 幅: 754px; Z インデックス: 2; }

#ThumbsHolder {
 display: none;
}

#ThumbsTable {
 left: 1px;
}

#Thumbs {
 background-color: #000;
 width: 703px;
}

#Thumbs ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#Thumbs ul li {
 display: inline;
}

.Thumbs ul li a {
 border-right: 1px solid #fff;
 border-top: 1px solid #fff;
 float: left;
 left: 1px;
}

.Thumbs ul li a img {
 filter: alpha(opacity=50);
 height: 104px;
 opacity: .5;
 width: 140px;
}

.Thumbs ul li a img.Hot {
 filter: alpha(opacity=100);
 opacity: 1;
}

これがJavaScriptです：

//Variables

var globalPath = "";

var imgMain; varガター; var ホルダー; var 親指; var loadingImage; var holderState; var imgCount; var imgLoaded; var キャプションホルダー; var キャプション状態 = 0; var キャプションHideTimer; var captionHideTime = 500; var thumbsHideTimer; var thumbsHideTime = 500;

$(document).ready(function() { //変数を読み込む imgMain = $("#MainImage"); captionHolder = $("#CaptionHolder"); gutter = $("#ThumbsGutter"); holder = $(" #ThumbsHolder"); thumbs = $("#Thumbs"); loadingImage = $("#LoadingImageHolder");

//Position Loading Image
loadingImage.centerOnObject(imgMain);

//Caption Tab Event Handlers
$("#CaptionTab").mouseover(function() {
    clearCaptionHideTimer();
    showCaption();
}).mouseout(function() {
    setCaptionHideTimer();
});

//Caption Holder Event Handlers
captionHolder.mouseenter(function() {
    clearCaptionHideTimer();
}).mouseleave(function() {
    setCaptionHideTimer();
});

//Position Gutter
if (jQuery.browser.safari) {
    gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 89) + "px");
} else {
    gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px");
}
//gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px");
//gutter.css("left", imgMain.offset().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - gutter.height()) + "px");

//Thumb Tab Event Handlers
$("#ThumbTab").mouseover(function() {
    clearThumbsHideTimer();
    showThumbs();
}).mouseout(function() {
    setThumbsHideTimer();
});

//Gutter Event Handlers
gutter.mouseenter(function() {
    //showThumbs();
    clearThumbsHideTimer();
}).mouseleave(function() {
    //hideThumbs();
    setThumbsHideTimer();
});

//Next/Prev Button Event Handlers
$("#btnPrev").mouseover(function() {
    $(this).attr("src", globalPath + "/Images/GalleryLeftButtonHot.jpg");
}).mouseout(function() {
    $(this).attr("src", globalPath + "/Images/GalleryLeftButton.jpg");
});

$("#btnNext").mouseover(function() {
    $(this).attr("src", globalPath + "/Images/GalleryRightButtonHot.jpg");
}).mouseout(function() {
    $(this).attr("src", globalPath + "/Images/GalleryRightButton.jpg");
});

//Load Gallery
//loadGallery(1);

});

function loadGallery(galleryID) { //ホルダーを隠す holderState = 0; holder.css("表示", "なし");

//Hide Empty Gallery Text
$("#EmptyGalleryText").css("display", "none");

//Show Loading Message
$("#LoadingGalleryOverlay").css("display", "inline").centerOnObject(imgMain);
$("#LoadingGalleryText").css("display", "inline").centerOnObject(imgMain);

//Load Thumbs
thumbs.load(globalPath + "/GetGallery.aspx", { GID: galleryID }, function() {
    $("#TitleHolder").html($("#TitleContainer").html());
    $("#DescriptionHolder").html($("#DescriptionContainer").html());

    imgCount = $("#Thumbs img").length;
    imgLoaded = 0;

    if (imgCount == 0) {
        $("#LoadingGalleryText").css("display", "none");
        $("#EmptyGalleryText").css("display", "inline").centerOnObject(imgMain);

    } else {
        $("#Thumbs img").load(function() {
            imgLoaded++;

            if (imgLoaded == imgCount) {
                holder.css("display", "inline");

                //Carousel Thumbs
                thumbs.jCarouselLite({
                    btnNext: "#btnNext",
                    btnPrev: "#btnPrev",
                    mouseWheel: true,
                    scroll: 1,
                    visible: 5
                });

                //Small Image Event Handlers
                $("#Thumbs img").each(function(i) {
                    $(this).mouseover(function() {
                        $(this).addClass("Hot");
                    }).mouseout(function() {
                        $(this).removeClass("Hot");
                    }).click(function() {
                        //Load Big Image
                        setImage($(this));
                    });
                });

                holder.css("display", "none");

                //Load First Image
                var img = new Image();
                img.onload = function() {
                    imgMain.attr("src", img.src);
                    setCaption($("#Image1").attr("alt"));

                    //Hide Loading Message
                    $("#LoadingGalleryText").css("display", "none");
                    $("#LoadingGalleryOverlay").css("display", "none");
                }
                img.src = $("#Image1").attr("bigimg");
            }
        });
    }
});

}

function showCaption() { if (captionState == 0) { $("#CaptionTab").attr("src", globalPath + "/Images/CaptionTabHot.jpg"); captionHolder.css("display", "inline").css("left", imgMain.position().left + "px").css("top", imgMain.position().top + "px") .css("width", imgMain.width() + "px").effect("slide", { "direction": "up" }, 500, function() { captionState = 1; }); } }

function hideCaption() { if (captionState == 1) { captionHolder.toggle("slide", { "direction": "up" }, 500, function() { $("#CaptionTab").attr("src" , globalPath + "/Images/CaptionTab.jpg"); captionState = 0; }); } }

function setCaptionHideTimer() { captionHideTimer = window.setTimeout(hideCaption,captionHideTime); }

関数 clearCaptionHideTimer() { if(captionHideTimer) { window.clearTimeout(captionHideTimer); キャプションHideTimer = null; } }

function showThumbs() { if (holderState == 0) { $("#ThumbTab").attr("src", globalPath + "/Images/ThumbTabHot.jpg"); holder.effect("スライド", { "方向": "下" }, 500, function() { holderState = 1; }); } }

関数 hideThumbs() { if (holderState == 1) { if (jQuery.browser.safari) { holder.css("display", "none"); $("#ThumbTab").attr("src", globalPath + "/Images/ThumbTab.jpg"); ホルダー状態 = 0; } else { holder.toggle("slide", { "direction": "down" }, 500, function() { $("#ThumbTab").attr("src", globalPath + "/Images/ThumbTab.jpg "); holderState = 0; }); }

}

}

function setThumbsHideTimer() { thumbsHideTimer = window.setTimeout(hideThumbs,thumbsHideTime); }

関数 clearThumbsHideTimer() { if(thumbsHideTimer) { window.clearTimeout(thumbsHideTimer); thumbsHideTimer = null; } }

function setImage(image) { //読み込み中の画像を表示する loadingImage.css("display", "inline");

var img = new Image();
img.onload = function() {
    //imgMain.css("background","url(" + img.src + ")").css("display","none").fadeIn(250);
    imgMain.attr("src", img.src).css("display", "none").fadeIn(250);
    setCaption(image.attr("alt"));

    //Hide Loading Image
    loadingImage.css("display", "none");
};
img.src = image.attr("bigimg");

}

function setCaption(caption) { $("#CaptionText").html(caption); //alert($("#CaptionText").html()); /* if (caption.length > 0) { $("#CaptionText") .css("display", "inline") .css("left", imgMain.position().left + "px") .css ("top", imgMain.position().top + "px") .css("width", imgMain.width() + "px") .html(キャプション);

    $("#CaptionOverlay").css("display", "inline")

.css("height", $("#CaptionText").height() + 36 + "px") .css("left", imgMain.position().left + "px") .css("top" , imgMain.position().top + "px") .css("width", imgMain.width() + "px"); } else { $("#CaptionText").css("display", "none"); $("#CaptionOverlay").css("表示", "なし"); } */}

どなたか助けていただければ幸いです。

前もって感謝します。

ジャスティン

4

1 に答える 1

0

Chrome 4.1.249.1064 を使用していますが、トップ バーは完璧に機能します。ページを更新しなくてもキャプションが表示されます。Firefox 3.6.3 でも同じ、すべて完璧に動作します Safari 4.0.3 でも同じ、すべて完璧に動作します

于 2010-05-13T07:45:25.040 に答える