[Js]+[jQuery] przeglądarka zdjęć ( galeria) - jak ją udoskonalić. Opcje

[motodd]

Witam. Napisałem sobie taką bardzo prostą przeglądareczke zdjęć. PRzeglądareczke tzn po kliknieciu na miniaturkę otwiera mi się większe zdjęcie , jest prosta nawigacja. Ale mam kilka problemów:
- chciałbym zrobić, aby po kliknięciu "następne" lub "poprzednie" zdjęcia płynnie przechodziły. Tzn ich wielkość zmieniała się płynnie.
Nie wiem wogole jak sie do tego zabrać. Nowe zdjęcie wczytuje pobierając atrybut "alt" z juz istenijącej fotki miniaturki . i ten atrybut wczytuje do diva "fotka_wczytana" poprzez .html() . - ogolnie to chyba zle się za to zabrałem . Dlatego zerknijcie na kod i podpowiedzcie jak to zrobić prawidło. Najlepiej jakby się dalo wczytać nową fotke gdzieś w tle- pobrac jej szerokość, wysokość i zmienić poprzez .animate wielkość diva "fotka_wczytana" a nastepnie wyswietlnić w niej dany img.

tutaj przykład klik

[JAVASCRIPT] pobierz, plaintext 
	$("#galeria img").click( function(){
			var alt = $(this).attr('alt');
			$('.aktualne_img').removeClass();
			$(this).addClass('aktualne_img');
			pokaz_obraz(alt);
		});
 
function pokaz_obraz($a) {
	var link = $a;
	if (!$("#gallery")) {
	} else {
		$("#gallery").fadeIn(500);
		$("#exposeMask").fadeIn(500);
	}
	$("#fotka_wczytana").hide(); 
 	$(".close").hide(); 
 	$("#gallery").hide(); 
	var nextSiblings = $('.aktualne_img').next('img');
	var prevSiblings = $('.aktualne_img').prev('img');
	if (nextSiblings.length > 0) {
		$('.next').css("display", "block");
	} else {
		$('.next').css("display", "none");
	}
	if (prevSiblings.length > 0) {
		$('.prev').css("display", "block");
	} else {
		$('.prev').css("display", "none");
	}
	var opis = $(".aktualne_img").attr("longdesc");
	var tekst_img = '<img src="' + link + '"/>';
	var ekran_h2 = $(window).height() - 50;	
	$("#fotka_wczytana").html(tekst_img); 
	$('#fotka_wczytana img').load(function() {
		      $("#gallery").show(); 
 			$("#fotka_wczytana").show(); 
 			$(".close").show(); 
 			var img_h = $("#fotka_wczytana").height();
 			var ekran_h = $(window).height();
 			var ekran_w = $(window).width();
 			if(ekran_h2 < img_h ){
 					$("#fotka_wczytana img").css("height", ekran_h2);
 				}
 			else{
 
 				$("#fotka_wczytana img").css("height", img_h);
 				}
 
 
			var img_w = $("#fotka_wczytana").width();
 
			var margines = (ekran_w - img_w) / 2;
			$("#info").html(opis);
			$("#gallery").css("left", margines);
 
 });
 
 
		$(".next").click(function() {
 
			var next_img = $(".aktualne_img").next("img").attr("alt");
 
			var next_img_remove = $(".aktualne_img").next("img");
 
			$(".aktualne_img").removeClass();
 
			$(next_img_remove).addClass("aktualne_img");
 
			pokaz_obraz(next_img);
 
		});
 
 
		$(".prev").click(function() {
 
			var prev_img = $(".aktualne_img").prev("img").attr("alt");
 
			var prev_img_remove = $(".aktualne_img").prev("img");
 
			$(".aktualne_img").removeClass();
 
			$(prev_img_remove).addClass("aktualne_img");
 
			pokaz_obraz(prev_img);
 
		});
 
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="gallery" class="simple_overlay" style=" padding-bottom:0px; position: absolute; display: none; z-index: 10007; top: 20px;left:200px; background-image: url(./img/bg_gal.png); background-repeat: repeat;">
		<a 	class="close"></a>
		<div id="fotka_wczytana" ></div>
		<div id="info">tutaj jakiś opisik fotki</div>
</div>
 
<div
	style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; z-index: 10000; background-image: url(./img/bg_gal.png); background-repeat: repeat;"
	id="exposeMask">
 
<a class="next">następne</a>
<a class="prev">poprzednie</a>
[HTML] pobierz, plaintext 

[krowal]

Nie chce mi się patrzeć w kod, ale ja bym to zrobił tak: Wczytujesz obrazek przez obiekt Image, ma on event load który uruchamia się gdy obrazek zostanie wczytany. Wtedy pobierasz nowe rozmiary obrazka, za pomocą animate() zmieniasz rozmiary okienka (dostosowując je do nowych rozmiarów pobranych z obiektu Image) i w tym samym czasie wyśrodkowujesz okienko na ekranie. Ostatni krok to podmienienie obrazka w okienku na ten z obiektu Image.

[motodd]

Dzięki za odpowiedz. Właśnie o to mi chodziło. Zeby tego img umieścić gdzies. ale nie wiedzialem jak to sie nayzwa. Teraz poczytam o obiektach Image. Bo rozumiem, ze to specjalny obiekt ktory przechowuje img, czy po prostu obiekty w js tworzy się dowolnie, i np obiektem moze być tablica. Pewnie napisalem bzdury, ale tak naprawdę jestem początkującym w tej dziedzinie.
Dzięki jeszcze raz za pomoc (IMG:style_emoticons/default/exclamation.gif) Pozdrawiam

i cos znalazłem odnośnie Image
klik

No i paru godzinach kombinacji działa
http://www.motodd.cal.pl/galeria/

Ten post edytował motodd 1.03.2011, 17:11:18