Una galeria amb Fade jQuery
Pàgina 1 de 2
Amb jQuery es pot crear una galeria d'imatges molt simple de molt atractiu, en aquest senzill tutorial veurem com crear una galeria de desaparèixer simple o una galeria on les imatges apareixen a la seqüència (al costat de l'altra) en lloc d'utilitzar un efecte d'atenuació agradable.
Per aconseguir les nostres galeries NO utilitzar cap plugin, però ens limitarem a una hàbil utilització de les eines que ofereix jQuery.
Veiem una vista prèvia del que ens proposem:
S'analitza el codi HTML:
<html>
<head>
<title> Una diapositiva galeria amb 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>
Estem en el cos de la pàgina a la qual se li assigna un ID fadegallery DIV, mentre que la capçalera que anomenem el full d'estils extern, la llibreria jQuery i l'arxiu dels quals fadegallery.js següent codi:
funció de presentació (x) {$ ("# img" + x) fadeIn ("slow ");.}
$ (Document). Llest
(
function ()
{
$ ("# Fadegallery"). Després de ("
");
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));
}
}
);
El seu funcionament és senzill: En primer lloc, crear una funció que crida a la funció amb paràmetres de fadeIn jQuery per veure (amb la decoloració) de DIV diferents de construir dinàmicament cicle que extreu tots els elements d'una matriu que al seu torn, conté imatges i dissenys de pàgina en HTML.
Dins del bucle, també ens mostra cridar a la funció () amb un temporitzador que s'inicia i un segon augment d'un segon addicional per cada pas per tal de crear amb precisió l'efecte de la seqüència.
Nota de la declaració:
$ ("# Fadegallery"). Després de ("
");
s'insereix al principi de la funció (): Aquest està dissenyat per a lliscar qualsevol contingut que es troba a la part inferior div a la casa de la galeria (a falta de superposició de danys en els elements desagradables a causa de la propietat float de CSS fem servir).
 |
Curs de CSS
Disseny Web i d'accessibilitat d'acord amb W3C CSS i XHTML. A partir de 29 €. |
 |
Curs d'HTML
El llenguatge de marcat per a la web des de 29 €. |
 |
Curs de Javascript
Guia completa de seqüència del costat del client. A partir de 39 €. |
