OK, więc tak :)
jest tablica ze zdjęciami: fota[][] - numer, wymiary itp...
tworze dwa obrazy:
var im1 = new Image();
im2 = new Image();
potem ma funkcje do wyskalowania:
function skaluj() {
....
};
w HTML mam dwa divy:
<div id="image1" style="position: absolute; opacity: 1; width: 58%; height: 400px; border: solid 0px red; background-repeat: no-repeat; background-image: url(''); background-position: center center; background-size: contain;">
<img src="" id="fotografia1" alt="obraz galerii"/>
</div>
<div id="image2" style="position: absolute; opacity: 0; width: 58%; height: 400px; border: solid 0px red; background-repeat: no-repeat; background-image: url(''); background-position: center center; background-size: contain;">
<img src="" id="fotografia2" alt="obraz galerii"/>
</div>
potem jest tak:
if (fotka == 2) fotka = 1; else fotka = 2;
function zaladowano(){
$("#loader").animate({opacity: 0}, 200);
if (fotka == 1) {
$("#fotografia1").attr("src", im1.src);
skaluj("#fotografia1", fota[2][numer], fota[3][numer]);
$("#image2").animate({opacity: 0}, 500, function(){
//$("#fotografia2").attr("src", "");
//im2.src = "";
});
$("#image1").animate({opacity: 1}, 500, function(){if (info) $("#fotoInfo").fadeIn(500); if (!info) $("#fotoInfo").fadeOut(500);});
}
if (fotka == 2) {
$("#fotografia2").attr("src", im2.src);
skaluj("#fotografia2", fota[2][numer], fota[3][numer]);
$("#image1").animate({opacity: 0}, 500, function(){
//$("#fotografia1").attr("src", "");
//im1.src = "";
});
$("#image2").animate({opacity: 1}, 500, function(){if (info) $("#fotoInfo").fadeIn(500); if (!info) $("#fotoInfo").fadeOut(500);});
}
};
function wPrawo() {
numer++;
if (numer > iloscZdjec) numer = 1;
pozycja = numer * szerokoscMiniaturki - szerokoscMiniaturki;
if ((pozycja > 366) && (numer < iloscZdjec-2))
$("#miniaturki").animate({"left": -pozycja+366}, 300, function(){pozPaskaX = $("#miniaturki").css("left").substring(0, $("#miniaturki").css("left").length-2);});
if (numer == 1)
$("#miniaturki").animate({"left": 0}, 300, function(){pozPaskaX = $("#miniaturki").css("left").substring(0, $("#miniaturki").css("left").length-2);});
pozPaskaX = parseInt(pozPaskaX);
if (fotka == 2) fotka = 1; else fotka = 2;
$("#loader").animate({opacity: 1}, 200);
$("#fotoInfo").fadeOut(200, function(){
if (fotka == 1) {
im1.src = fota[1][numer];
im1.onLoad = zaladowano();
}
if (fotka == 2) {
im2.src = fota[1][numer];
im2.onLoad = zaladowano();
}
});
}
function wLewo() {
numer--;
if (numer <= 0) numer = iloscZdjec;
pozycja = numer * szerokoscMiniaturki - szerokoscMiniaturki;
if ((pozycja > 244) && (numer > 3) && (numer < iloscZdjec-2))
$("#miniaturki").animate({"left": -pozycja + 366}, 300, function(){pozPaskaX = $("#miniaturki").css("left").substring(0, $("#miniaturki").css("left").length-2);});
if (numer == iloscZdjec){
przes = (-szerokoscMiniaturki*iloscZdjec) + szerokoscPaska;
$("#miniaturki").animate({"left": -pozycja + szerokoscMiniaturki * 6}, 300, function(){pozPaskaX = $("#miniaturki").css("left").substring(0, $("#miniaturki").css("left").length-2);});
}
pozPaskaX = parseInt(pozPaskaX);
if (fotka == 2) fotka = 1; else fotka = 2;
$("#loader").animate({opacity: 1}, 200);
$("#fotoInfo").fadeOut(200, function(){
if (fotka == 1) {
im1.src = fota[1][numer];
im1.onLoad = zaladowano();
}
if (fotka == 2) {
im2.src = fota[1][numer];
im2.onLoad = zaladowano();
}
});
}
Teraz zachowuje się to tak, że zmiana zdjęć następuje, ale zanim pojawi się nowe zdjęcie, to jakieś inne wskakuje na miejsce nowego przyjmując rozmiary również nowego. Tak więc, zanim pojawi się nowe zdjęcie to wcześniej dzieją się dziwne rzeczy :(
Zobaczy ktoś na ten kod??
Z góry dzięki, Pozdrawiam