Prezentowane materiały są przeznaczone dla uczniów szkół ponadgimnazjalnych. Autor artykułu: mgr Jerzy Wałaszek, wersja1.0 |
©2010 mgr
Jerzy Wałaszek |
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):
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:
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 |
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