Ajax / Javascript Tutorial: elastische Vorschaubilder mit jQuery

0 | Bewertung: Keine Berechtigung!

Hallo DN,

in diesem Tutorial zeige ich euch, wie Ihr mit jQuery einen coolen Anzeigeeffekt hinbekommt.
Ich setzte ein paar html/css Kentnisse vorraus. Aber bei Fragen einfach eine PN schreiben dann helf ich euch gerne weiter.

Schritt 01:

Wir erstellen eine neue .html Datei und bauen Sie so auf.

Code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>Erstelle elastische Vorschaubilder mit jQuery</title>


</head>


<div id="container">


<h1>jQuery Vorschaubilder</h1>


    <div id="menue">


    <a href="#" class="menueLink"><img src="images/blau.jpg"></a>


    <a href="#" class="menueLink"><img src="images/gelb.jpg"></a>


    <a href="#" class="menueLink"><img src="images/gruen.jpg"></a>


    <a href="#" class="menueLink"><img src="images/rot.jpg"></a>


    </div>


</div>


<body>


</body>


</html>

Schritt 02:

Kommen wir zur CSS formatierung.

Code:



#container{ position:relative; height:210px; }  


 


#menu{position:absolute; bottombottom:0;}  





.menueLink{ position:fixed relative; bottombottom:0px; display:inline-table; }  





img { -ms-interpolation-mode: bicubic; border:2px solid #000; }





a { outline:none;}

Schritt 03:

Jetzt kommt der JavaScript Code denn Ihr in eine externe .js Datei schreibt oder mit in den Head der Html Datei.

Code:



$(document).ready(function(){  


     $('.menueLink img').animate({width: 100}, 0); //Gibt allen Bildern in der Klasse .menueLink eine kleinere Breite  


   


     $('.menueLink').mouseover(function(){ //Mausover funktion  


   


         gridimage = $(this).find('img'); //Gib dem Bild eine variable 


         gridimage.stop().animate({width: 200}, 150); //Animiert das Bild in seine original Größe  


   


     }).mouseout(function(){ //Maus nicht mehr auf dem Bild  


   


         gridimage.stop().animate({width: 100}, 150); //Animiert das Bild wieder klein  


   


     });  


 });

Bitte denkt dran auch die jQuery Datei einzubinden ohne diese funktioniert es nicht. Die Datei könnt Ihr euch hier donwloaden: jquery.com

Jetzt müsst Ihr nur noch eure Vorschaubilder erstellen, die Masse im JavaScript anpassen und schon habt Ihr eine coolen Effekt für eure Vorschaubilder.

Ich habe mal eine Demo für euch bereitgestellt mit allen Datein diese könnt Ihr euch hier donwloaden: jQuery Paket http://rapidshare.com/files/282949170/jquery-bilder.rar