[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