..


Sponzorované odkazy

Galéria jQuery fade

Článok napísal Luca Ruggiero
Strana 1 z 2

Vďaka jQuery je možné realizovať veľmi jednoduché galérie obrázkov z veľmi atraktívne, v tomto jednoduchom tutoriále uvidíme, ako vytvoriť jednoduchý fade galérie alebo galériu, kde obrazy sa v poradí (vedľa seba), skôr než používať fade efekt príjemné.

K dosiahnutiu našich galérií Nepoužívajte žiadne pluginy, ale my sa obmedzujeme na rozumné využívanie nástrojov, ktoré poskytuje jQuery.

Vidíme náhľad toho, čo chceme:

fadegallery jQuery
Berieme na vedomie, že tretí obrázok bol zachytený na obrázku v dobe, kedy sa chystá pop volanie skriptu na vzhľad jednotlivých snímok sa v tomto zmysle fadeIn druhý ďaleko od seba.

Analyzujeme HTML kód: 






 <html>



  



 <head>



    



 Snímok <title> galérie jQuery </ title>



    



 <link rel="stylesheet" type="text/css" href="style.css">



    



 <script type="text/javascript" src="jquery.js"> </ script>



    



 <script type="text/javascript" src="fadegallery.js"> </ script>



  



 </ Head>







 <body>









 <div id="fadegallery"> </ div>









 </ Body>







 </ Html>
Máme v tele stránky, na ktorú určíme DIV ID fadegallery, hovoríme hlavičke a vonkajšie štýly, jQuery knižnicu a súbor, ktorý nasleduje fadegallery.js kód: 





 Funkcia show (x) {$ ("# img" + x) fadeIn ("pomaly").}







 $ (Document). Pripravené







 (



  



 function ()



  



 {



    



 $ ("# Fadegallery"). Po ("

 
 



 ");



    



 var img = new Array ();



    



 / / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **



    



 img [0] = "pippo.jpg";



    



 img [1] = "pluto.jpg";



    



 img [2] = "paperino.jpg";



    



 / / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **



    



 var i = 0;



    



 for (i = 0; i <img.length, i + +)



    



 {



      



 $ ("# Fadegallery"). Doplnené ("i + + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ div>") ;



      



 window.setTimeout ("show (" + i + ")", ((i + 1) * 1000));



    



 }



  



 }







 );

Jeho prevádzka je jednoduchý: Najprv vytvoríme parametrizované funkcia, ktorá volá funkcie jQuery fadeIn pre prehliadanie (s vyblednutie) rôznych DIV, ktorý staviame dynamicky v rámci cyklu, ktorý získa všetky položky v poli, ktorý, podľa poradia, Obsahuje obrazy a rozloženia stránky v HTML.

Vnútri cyklu tiež pripomínajú, zobrazí funkcia () s časovačom, prebiehajúce od druhej a ďalšie zvýšenie sekúnd na každom kroku v poriadku, presne, vytvoriť efekt poradí.

Poznámka vyhlásenie: 

 



 $ ("# Fadegallery"). Po ("

 
 



 ");
vložené na začiatku function (): Toto je navrhnutý tak, aby navigačné akýkoľvek obsah umiestnený pod DIV do domu našej galérie (pri absencii prekrývajúcich sa prvkov môže spôsobiť nepríjemné, pretože plávať v CSS vlastnosti, ktoré využívame).

V rovnakej kategórii ...
E-Learning
CSS (kurz) CSS (kurz)
Web Design a prístupnosti podľa W3C CSS a XHTML. Od 29 €.
HTML (kurz) HTML (kurz)
Značkovací jazyk pre web od 29 €.
JavaScript (kurz) JavaScript (kurz)
Kompletný sprievodca pre skriptovanie na strane klienta. Od 39 €.
Sponzorované odkazy