[JS][CSS] Przegladarka zdjec Opcje

[Polik]

Witam!

Zaczynam przygode z JS. Napalilem sie na zrobienie galerii zdjec takiej jak np. na stronie Nickelbacka (http://www.nickelback.com/). Na raze chcialem zrobic tylko jedna warstwe, ktora bedzie sie rozszezac lub zmniejszac w zaleznosci od wielkosci zdjecia. Napotkalem jednak na swojej drodze wiele trudnosci wiec licze ze mi pomozecie. Oto kod:

[PHP] pobierz, plaintext 
<?php
function initial(nazwa_gal, ilosc_zdj) 
  {
	//zapamietujemy ilosc zdjec do zmiennej globalnej
	ilosc_zdjec = ilosc_zdj;
 
	//tworzymy liste nazw zdjec
	for(i=1; i<=ilosc_zdj; i++)
	  {
		if(i<10)
		lista[i] = nazwa_gal+"0"+i+".jpg";
		else
		  lista[i] = nazwa_gal+i+".jpg";
		}
 
	//ustawiamy widocznosc warstwy
  document.all['gal_layer'].style.visibility = "visible";
 
	next();
  }
 
function prev()
  {
	//sprawdzamy czy nie wyszlismy poza zakres listy zdjec
	if(aktualne_zdj > 1)
		aktualne_zdj--;
 
	//skalujemy warstwe pod zdjecie
	skalowanie(aktualne_zdj);
 
	//zmieniamy zdjecie
	document.getElementById("obrazek").src = lista[aktualne_zdj];
	}
 
function next()
  {
	//sprawdzamy czy nie wyszlismy poza zakres listy zdjec
	if(aktualne_zdj < ilosc_zdjec)
	  aktualne_zdj++;
 
	//skalujemy warstwe pod zdjecie
	skalowanie(aktualne_zdj);
 
	//zmieniamy zdjecie
	document.getElementById("obrazek").src = lista[aktualne_zdj];
	}
 
function skalowanie(numer_zdj)
  {
	var img = new Image();
  img.src = lista[numer_zdj];
 
	nowy_width = img.width + 20;
	nowy_height = img.height + 100;
 
 
	//document.all['gal_layer'].style.left = 500 - (img.width/2);
 
	//ustawiamy wielkosc warstwy wzgledem obrazka
	document.all['gal_layer'].style.width = nowy_width;
 
 
  //document.all['gal_layer'].style.height = nowy_height;
	//moving(nowy_height);
 
	stary_height = document.all['gal_layer'].offsetHeight;
	alert("stary: "+stary_height+", nowy: "+nowy_height);
 
 
	if(stary_height > nowy_height)
	  {
	  alert("poMniejszam")
		zmien_rozmiar(nowy_height, 0)
		}
	else
	  {
		alert("poWiekszam")
	  zmien_rozmiar(nowy_height, 1)
		}
 
	//ustawiamy clip warstwy wzgledem obrazka
	document.all['gal_layer'].style.clip = "rect(0px,"+nowy_width+"px,"+nowy_height+"px,0px)";
	}
 
function zmien_rozmiar(nowy_height, kierunek) 
  {
  //pobieramy aktualna wysokosc warstwy
	stary_height = document.all['gal_layer'].offsetHeight;
 
	//jezeli wysokosci sie nie zrownaly dodajemy lub odejmujemy
	if(stary_height != nowy_height)
	{
		if(kierunek == 0)
			document.all['gal_layer'].style.height = stary_height - 1;
		if(kierunek == 1)
			document.all['gal_layer'].style.height = stary_height + 1;
  }
 
	//przechowujemy zmienne bo sie gubia (nie wiem dlaczego)
	war = nowy_height;
	wat = kierunek;
 
	//wywolujemy kolejny raz funkcje zmien_rozmiar
	setTimeout('zmien_rozmiar(war, wat)', 100);
  }
?>
[PHP] pobierz, plaintext 

Idea jest taka. Na poczatku inicjalizujemy galerie, ustawiamy warstwe i robimy liste zdjec do przegladniecia. Klikajac next odpalamy funkcje, ktora powinna zeskalowac warstwe pod odpowiednie zdjecie i je pozniej wyswietlic. Na razie skrypt napisany tylko pod wysokosc zdjecia.

Problemy:
- przegladajac galerie, jezeli trafimy na wieksze zdjecie od poprzedniego warstwa ladnie sie zeskaluje animujac, kiedy jednak trafimy na mniejsze zdjecie juz nie chce sie animowac tylko automatycznie skaluje.
- sadzac po kodzie myslalem, ze warstwa najpierw bedzie sie skalowac pod odpowiednie zdjecie dopiero pozniej je zaladuje jednak jak zauwazylem wcale sie tak to nie odbywa.
- narazie testuje to pod IE pod firefoxem radze nie ruszac (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Wybaczcie ze w kodzi znajduje sie troche dziwnych zakomentowanych linijek ale kombinowale juz na rozne sposoby i balem sie czegos nie usuwac zeby nie spieprzyc czegos na amen (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Mam nadzieje, ze znajdzie sie ktos cierpliwy i wytlumacz mi kilka spraw
Pozdrawiam i licze na wsparcie!
Polik

[abc667]

fajnie że chcesz zrobić coś sam ale wpisz sobie w google lightbox2