Coole Slideeffekte für Ihre Bilder, einfach realisiert mit jQuery:
Wie funktioniert das ganze? Eigentlich recht einfach. Zuerst binden wir die jQuery-Bibliothek ein. Dazu fügen wir im Head der HTML-Datei folgenden Code ein:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
Google hostet die jQuery Bibliothek für uns, so dass wir uns nicht selbst darum kümmern müssen.
Nun legen binden wir die beiden Bilder ein:
<div id="smallimage"> <img src="1_tn.jpg" onclick="ShowBig();"></img> </div> <div id="bigimage" style="display:none" onclick="ShowSmall();"> <img src="1.jpg"></img> </div>
Das große Bild ist zum Anfang ausgeblendet (display:none). Bei einem Klick auf das jeweilige Bild wird eine Java-Script-Funktionen aufgerufen, diese fügen wir im Head-Bereich ein:
<script>
function ShowBig()
{
$("#smallimage").slideUp();
$("#bigimage").show("slow");
}
function ShowSmall()
{
$("#bigimage").slideUp();
$("#smallimage").show("slow");
}
</script>
Die beiden Funktionen blenden jeweils das eine Bild ein (show) und das andere aus (slideUp). Mit dem Parameter “slow” geben wir die Geschwindigkeit vor. Mittels “$(#nameDesDivs)” geben wir an, auf welchen der beiden DIV-Elemente wir uns beziehen.
Das wars auch schon…
