JavaScript: zmiana zdjęcia bez przeładowania strony

Autor: Arkadiusz Tobiasz 9 września 2008

Dzisiaj chciałem Wam pokazać pewien trik 😉 Otóż jeśli chciałbyś stworzyć na swojej stronie małą galerię z jednym dużym zdjęciem i x miniaturkami, to tradycyjnie, aby obejrzeć te x miniaturek powiększonych musiałbyś x razy przeładować stronę. Jest jednak sposób, aby zmienić zdjęcia bez przeładowania strony.
Mamy oto taki kod HTML:

1
2
3
4
5
6
<center>
<a href="zdjecie1.jpg"><img src="zdjecie1.jpg" style="align:center;height:300px;border:1px solid #7298cc;"></a>
<br><br><a href="zdjecie1.jpg"><img src="zdjecie1.jpg" style="align:center;height:100px;border:1px solid #7298cc;"></a>&nbsp;&nbsp;
<a href="zdjecie2.jpg"><img src="zdjecie2.jpg" style="align:center;height:100px;border:1px solid #7298cc;"></a>&nbsp;&nbsp;
<a href="zdjecie3.jpg"><img src="zdjecie3.jpg" style="align:center;height:100px;border:1px solid #7298cc;"></a>&nbsp;&nbsp;
</center>

Jeśli chcemy, aby nasze miniaturki pokazywały się po kliknięciu w miejscu, gdzie mamy duży obraz musimy tam dodać wartości id:

1
2
<center>
<a id="url" href="zdjecie1.jpg"><img id="foto" src="zdjecie1.jpg" style="align:center;height:300px;border:1px solid #7298cc;"></a>

Ja dodałem wartości id kolejno równe url i foto, teraz czas na edycję odnośników w miniaturkach, posłużymy się w tym celu atrybutem onclick, a nasz kod będzie wyglądał tak:

1
2
3
4
<br><br><a href="zdjecie1.jpg" onclick="document.getElementById('foto').src=this.href;document.getElementById('url').href=this.href; return false"><img src="zdjecie1.jpg" style="align:center;height:100px;border:1px solid #7298cc;"></a>&nbsp;&nbsp;
<a href="zdjecie2.jpg" onclick="document.getElementById('foto').src=this.href;document.getElementById('url').href=this.href; return false"><img src="zdjecie2.jpg" style="align:center;height:100px;border:1px solid #7298cc;"></a>&nbsp;&nbsp;
<a href="zdjecie3.jpg" onclick="document.getElementById('foto').src=this.href;document.getElementById('url').href=this.href; return false"><img src="zdjecie3.jpg" style="align:center;height:100px;border:1px solid #7298cc;"></a>&nbsp;&nbsp;
</center>

Ostatecznie kod skryptu wygląda tak:

1
2
3
4
5
6
<center>
<a id="url" href="zdjecie1.jpg"><img id="foto" src="zdjecie1.jpg" style="align:center;height:300px;border:1px solid #7298cc;"></a>
<br><br><a href="zdjecie1.jpg" onclick="document.getElementById('foto').src=this.href;document.getElementById('url').href=this.href; return false"><img src="zdjecie1.jpg" style="align:center;height:100px;border:1px solid #7298cc;"></a>&nbsp;&nbsp;
<a href="zdjecie2.jpg" onclick="document.getElementById('foto').src=this.href;document.getElementById('url').href=this.href; return false"><img src="zdjecie2.jpg" style="align:center;height:100px;border:1px solid #7298cc;"></a>&nbsp;&nbsp;
<a href="zdjecie3.jpg" onclick="document.getElementById('foto').src=this.href;document.getElementById('url').href=this.href; return false"><img src="zdjecie3.jpg" style="align:center;height:100px;border:1px solid #7298cc;"></a>&nbsp;&nbsp;
</center>

W taki oto sposób nasze miniaturki będą wyświetlać się po kliknięciu w nie w większym oknie.

komentarze 3

  1. tanie noclegi napisał(a):

    Tego akurat kiedyś szukałem. Bardzo dziękuję. Przyda się na pewno

  2. Łukasz napisał(a):

    Twój przykład pomógł mi w tworzeniu strony. Dzięki 🙂

  3. instalacje elektryczne napisał(a):

    Proste i pomocne. Dziękuję.

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]