Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: elastische Vorschaubilder mit jQuery



Ranking: +3   Kommentare: 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

Veröffentlicht von: deleted_1373545880
Veröffentlicht am: 21 Sep. 2009
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: Bilder Code CSS effekt HTML Java javascript jQuery script Vorschau


Themenverwandte Tutorials


Kommentar(e) (0)


Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder