Galeria fotografii

JavaScript pozwala nam w prosty sposób zaprogramować różnego rodzaju przeglądarki fotografii. Utwórz katalog dla swojej witryny, Następnie do katalogu images skopiuj poniższe grafiki. Zachowaj ich pierwotne nazwy (ważna jest numeracja w nazwach plików graficznych):

 

obrazek  obrazek  obrazek  obrazek  obrazek

obrazek  obrazek  obrazek  obrazek  obrazek

obrazek obrazek
obrazek obrazek
obrazek obrazek
obrazek obrazek
obrazek obrazek

 

Utwórz w NVU nową stronę i zapisz ją w katalogu pod nazwą index.html. Na stronie umieść formularz. Formularz nazwij frm_galeria. Do formularza wstaw tabelkę z dwoma wierszami po trzy kolumny. Komórki w górnym wierszu połącz i umieść tam miniaturki zdjęć. W dolnym wierszu w środkowej komórce umieść pierwsze zdjęcie. Zdjęcia wycentruj w komórkach. W prawej i lewej dolnej komórce dodaj po dwa przyciski:

 

obrazek

 

Do znacznika <img...> największego obrazka tego w dolnym wierszu tabeli) dodaj atrybut id:

 

<img id="obrazek" style="width: 512px; height: 345px;" alt="" src="images/0305_d_01.jpg">
 

W sekcji <head>...</head> umieść znacznik:

 

<script type="text/javascript" src="nav.js"></script>

 

Całość skryptu umieścimy w zewnętrznym pliku nav.js, który zapiszemy w katalogu witryny. W skrypcie tym umieść następującą treść;

 

nr_obrazka = 1;

function obr(n)
{
    nr_obrazka = n
    if(n < 10) n = "0" + n
    document.getElementById("obrazek").src = "images/0305_d_" + n + ".jpg"
}

 

Funkcja przyjmuje jeden parametr n - numer obrazka. Najpierw zapamiętuje go w zmiennej nr_obrazka, która będzie wykorzystywana później. Jeśli n jest mniejsze od 10 to dodaje do niego cyfrę 0. Po tej operacji z n = 4 robi się n = 04 (n jest już traktowane jako tekst, a nie jako liczba). Następnie funkcja wyszukuje obiekt obrazka wg jego identyfikatora i umieszcza w jego własności src nazwę pliku graficznego, którą składa z tekstów. W rezultacie przeglądarka wyświetli nowy obrazek.

Teraz do każdej miniatury w pierwszym wierszu tabeli wstaw hiperłącze. Jako adresy wpisuj kolejno:

 

javascript:obr(1)
javascript:obr(2)
javascript:obr(3)
...
javascript:obr(10)

 

W ten sposób po kliknięciu myszką obrazka skojarzone z nim hiperłącze uruchomi kod JavaScript - wywoła naszą funkcję obr() z numerem obrazka. Na podstawie tego numeru funkcja zmieni zawartość obrazka głównego. Mamy zatem wybór obrazków przez kliknięcia myszką w ich miniaturki.

W następnym kroku oprogramujemy nasze przyciski. W tym celu do skryptu musimy dopisać kolejne 2 funkcje:

 

function poprzedni()
{
  if(nr_obrazka > 1) obr(nr_obrazka - 1)
}

function nastepny()
{
  if(nr_obrazka < 10) obr(nr_obrazka +1)
}

 

Zmienna nr_obrazka przechowuje nr bieżąco wyświetlanego obrazka w dolnym wierszu tabelki. Pierwsza funkcja sprawdza, czy ten numer jest większy od 1. Jeśli tak, to ustawia obrazek z numerem o 1 mniejszym. Druga funkcja sprawdza, czy numer bieżącego obrazka jest mniejszy od 10. Jeśli tak, to ustawia nowy obrazek z numerem o jeden większym.

Następnie dołączamy do kolejnych przycisków zdarzenia onclick z kodem:

 

Przycisk zdarzenie
Poprzednie zdjęcie onclick="poprzedni()"
Pierwsze zdjęcie onclick="obr(1)"
Następne zdjęcie onclick="nastepny()"
Ostatnie zdjęcie onclick="obr(10)"

 

Galeria jest gotowa. Jak widzisz, wcale nie jest to takie trudne (oczywiście dla prostych galerii zdjęć). Możesz teraz zastanowić się nad rozbudową swojej galerii o kolejne zdjęcia. Coś trzeba będzie modyfikować w kodzie...

 


   I Liceum Ogólnokształcące   
im. Kazimierza Brodzińskiego
w Tarnowie

©2024 mgr Jerzy Wałaszek

Dokument ten rozpowszechniany jest zgodnie z zasadami licencji
GNU Free Documentation License.

Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl

W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe