W sieci są różne skrypty galerii – w PHP, w JS no ale większość jest niepotrzebnie rozbudowana… Więc pomogę wam napisać taki prosty skrypt. Przygotowałem wzór jak ta galeria będzie wyglądać:

galeria_schemat

Najpierw stworzymy sobie strukturę kodu HTML:

Wyjaśnienie: w div#informacje będą przechowywane informacje jak tytuł czy opis, w div#zdjecie będzie zeskalowane zdjęcie a div#miniaturki służy do przechowywania miniaturek. Mamy też przygotowane miejsce na skrypty, więc można przystąpić do pisania 😉

Na początek stworzymy sobie tablicę w której będą przechowywane dane zdjęć:

Zaraz pod tym zdefiniujemy zmienną max_width która będzie potrzebna do określenia maksymalnej szerokości obrazka, który zostanie zeskalowany aby nie rozwalać strony.

Teraz czas na funkcję która będzie nam tworzyć listę miniaturek oraz załaduje pierwsze zdjęcie:

Kod jest bardzo prosty – tworzymy pętlę i dodajemy kolejne zdjęcie do div#miniaturki. Później tylko wywołanie funkcji zmien(0) gdzie 0 symbolizuje pierwsze zdefiniowane zdjęcie w tablicy.

Teraz w/w funkcja zmien(), która będzie opowiadać za zmianę obrazka:

Teraz krótkie omówienie:

1. Dodajemy do div#zdjecia kolejnego diva#ladowanie który będzie nam wyświetlał pasek postępu (dodajemy a nie zmieniamy [+=] dlatego żeby uniknąć brzydkiego efektu znikania zdjęcia)
2. Tworzymy nowy obiekt Image(), dzięki któremu możemy zrobić załadowanie zdjęcia w tle (brzydki efekt j/w)
3. Po załadowaniu zdjęcia, kiedy dostępne są jego wymiary możemy sprawdzić czy szerokość obrazka nie jest większa niż dopuszczalna. Jeśli jest większa to obliczamy proporcjonalną wysokość (zobacz wpis o skalowaniu obrazków).
4. Dodajemy informację o zdjęciu oraz wyświetlamy obrazek.
5. Nadajemy atrybut src dla obiektu Image().
To by było na tyle, jeszcze tylko krótkie:

które mówi nam żeby po załadowaniu strony wywołać funkcję laduj() która nam stworzy listę miniaturek.

Ciekawostka:

Jeśli w window.onload potrzebujesz użyć funkcji z parametrami:

Jeszcze tylko trochę styli css i koniec:

div#ladowanie wyświetlamy blokowo z pozycją absolutną aby element był na wierzchu. Z szerokością i wysokością 100% – tło ustawimy na no-repeat (nie powtarzaj) i „center center” co znaczy że na samym środku. Tutaj zastosujemy mały hack dla Internet Explorer: wysokość od góry na 50% (ma coś problemy z tą pozycją tła). Jeszcze plik loading.gif.

Szerokość dla #zdjecie, #miniaturki (width: 520px;) powinna być taka sama jak w var max_width w kodzie js.

Cały kod:

Jak ktoś jest ciekawy jak to wygląda w praktyce przygotowałem przykład.