Slide Effect für Bilder

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…

Online-Demo | Demo-Download

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert