JavaScript: zmiana zdjęcia bez przeładowania strony

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.

Comments

tanie noclegi

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

Reply
Łukasz

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

Reply
instalacje elektryczne

Proste i pomocne. Dziękuję.

Reply

Leave a Comment

2 + 16 =