..


Sponzorované odkazy

Galerie s jQuery fade

Článek napsal Luca Ruggiero
Strana 1 z 2

S jQuery můžete vytvořit velmi jednoduchý obraz galerie velmi atraktivní, v tomto jednoduchém tutoriálu uvidíme, jak vytvořit jednoduchý fade galerie nebo galerie, kde se objeví v sekvenci obrázků (vedle sebe), spíše než používat fade efekt příjemné.

Pro dosažení našich galerií nepoužívejte žádné pluginy, ale my se omezíme na obratné používání nástrojů, které poskytuje jQuery.

Vidíme náhled toho, co chceme:

fadegallery jQuery
Bereme na vědomí, že třetí obraz byl zachycen na obrázku je okamžik, pop volání skriptu pro vzhled jednotlivých snímků se tento účinek fadeIn druhý daleko od sebe.

Analyzujeme HTML kód: 






 <html>



  



 <head>



    



 <title> snímek galerie s 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 těle stránky, na kterou určíme DIV ID fadegallery, zatímco hlavičky nazýváme vnější styly, jQuery knihovnu a soubor, který fadegallery.js následující kód: 





 Funkce show (x) {$ ("img #" + x) fadeIn ("pomalu").}







 $ (Document). Připraveno







 (



  



 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"). Append ("i + + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ div>") ;



      



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



    



 }



  



 }







 );

Jeho provoz je jednoduchý: Nejprve vytvoříme funkci, která volá parametrizované funkce jQuery fadeIn pro prohlížení (s blednutí) různých DIV se dynamicky vytvářet cyklus, který získá všechny položky v poli, který, podle pořadí, obsahuje obrázky a rozložení stránek do formátu HTML.

Uvnitř cyklu, a to i nám ukazuje volání funkce () s časovačem, který začíná a druhý nárůst další sekundu pro každý krok, aby se přesně vytvořit efekt pořadí.

Poznámka prohlášení: 

 



 $ ("# Fadegallery"). Po ("

 
 



 ");
vložené na začátku function (): Toto je navržen tak, aby snímek jakéhokoliv obsahu se nachází ve spodní části domu se div naší galerii (pro nedostatek může způsobit nepříjemné překrývání prvků díky plovák majetek v CSS My ho používáme).

Ve stejné kategorii ...
E-Learning
CSS (kurz) CSS (kurz)
Web Design a přístupnosti podle W3C CSS a XHTML. Od 29 €.
HTML (kurz) HTML (kurz)
Značkovací jazyk pro web od 29 €.
JavaScript (kurz) JavaScript (kurz)
Kompletní průvodce pro skriptování na straně klienta. Od 39 €.
Sponzorované odkazy