У меня проблема со скриптом для галереи изображений. Кажется, проблема возникает только в Safari и Chrome, но если я обновлю страницу, я получу ее корректную работу - странно!
Правильная функция:
У галереи есть верхняя панель, на которой при наведении курсора будет отображаться заголовок. Ниже сидит основное изображение. Внизу есть еще один бар, который является разворотом верхнего бара. При наведении на него, он будет отображать эскизы галереи.
Проблема:
В Safari и Chrome держатель миниатюр не будет отображаться. Фактически, он даже не показывает его как активный элемент (или опрокидывание). Но, как ни странно, если вы вручную обновите страницу, она начнет работать правильно до конца просмотра страницы. После того, как вы покинете страницу и вернетесь, снова появится та же ошибка, и вам придется пройти через тот же процесс.
Вот одна из страниц для просмотра:
текст ссылки
Вот CSS:
#ThumbsGutter {
background: url(../Images/1x1.gif);
background: url(/Images/1x1.gif);
высота: 105px;
слева: 0px;
положение: абсолютное;
верх: 0px;
ширина: 754 пикселя;
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 loadingImage;
var holderState;
var imgCount;
var imgLoaded;
var captionHolder;
var captionState = 0;
var captionHideTimer;
var captionHideTime = 500;
var thumbsHideTimer;
var thumbsHideTime = 500;
$ (документ) .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);
}); * * тысяча двадцать-семь
функция loadGallery (galleryID) {
// Скрыть держатель
holderState = 0;
holder.css ("display", "none");
//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);
}
function clearCaptionHideTimer () {
if (captionHideTimer) {
window.clearTimeout (captionHideTimer);
captionHideTimer = null;
}
}
function showThumbs () {
if (holderState == 0) {
$ ("# ThumbTab"). Attr ("src", globalPath + "/Images/ThumbTabHot.jpg");
holder.effect ("slide", {"direction": "down"}, 500, function () {
holderState = 1;
});
}
}
function hideThumbs () {
if (holderState == 1) {
if (jQuery.browser.safari) {
holder.css ("display", "none");
$ ("# ThumbTab"). Attr ("src", globalPath + "/Images/ThumbTab.jpg");
holderState = 0;
} еще {
holder.toggle ("slide", {"direction": "down"}, 500, function () {
$ ("# ThumbTab"). Attr ("src", globalPath + "/Images/ThumbTab.jpg");
holderState = 0;
});
}
}
}
функция setThumbsHideTimer () {
thumbsHideTimer = window.setTimeout (hideThumbs, thumbsHideTime);
}
function clearThumbsHideTimer () {
if (thumbsHideTimer) {
window.clearTimeout (thumbsHideTimer);
thumbsHideTimer = null;
}
}
функция setImage (изображение) {
// Показать изображение загрузки
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");
}
функция setCaption (заголовок) {$ ( "# CaptionText") HTML (подпись).
// оповещения ($ ( "# CaptionText") HTML ().);
/ *
if (caption.length> 0) {
$ ( "# CaptionText")
.css ("display", "inline")
.css ("left", imgMain.position (). left + "px")
.css ("top", imgMain.position (). top + "px")
.css ("ширина", 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");
} еще {
$ ("# CaptionText"). Css ("display", "none");
$ ("# CaptionOverlay"). Css ("display", "none");
}
* /
}
Пожалуйста, если кто-нибудь может помочь, это было бы очень признательно!
Заранее спасибо.
Justin