Una galería con Fade jQuery
Página 1 de 2
Gracias a jQuery es posible realizar una galería de imágenes muy simple de muy atractivo, en este sencillo tutorial veremos como crear una galería de desaparecer simple o una galería donde las imágenes aparecen en la secuencia (junto a la otra) en lugar de utilizar un efecto de atenuación agradable.
Para lograr nuestras galerías de NO utilizar cualquier plugins, pero nos limitaremos a un uso racional de las herramientas que provee jQuery.
Vemos una vista previa de lo que nos proponemos:
Se analiza el código HTML:
<html>
<head>
Una galería <title> de diapositivas con 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>
Estamos en el cuerpo de la página a la que se le asigna un ID fadegallery DIV, llamamos a la cabecera y la hoja de estilos externa, la biblioteca jQuery y el archivo de fadegallery.js que sigue al código:
función de presentación (x) {$ ("# img" + x) fadeIn ("lento");.}
$ (Document). Listo
(
function ()
{
$ ("# Fadegallery"). Despué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));
}
}
);
Su funcionamiento es sencillo: En primer lugar, crear una función con parámetros que llama a la función de fadeIn jQuery para ver (con la decoloración) de la DIV diferentes que podemos construir de forma dinámica en el ciclo que extrae todos los elementos de una matriz que, a su vez, contiene las imágenes y diseños de página en HTML.
Dentro del bucle, también recuerdan la muestra function () con un contador de tiempo que va desde un segundo y un aumento adicional de segundos a cada paso con el fin, precisamente, para crear la secuencia de efectos.
Nota de la declaración:
$ ("# Fadegallery"). Después de ("
");
inserta al principio de la función (): Este está diseñado para desplazarse a cualquier contenido que se encuentra bajo el DIV a la casa de nuestra galería (en ausencia de elementos superpuestos puede causar desagradables debido a la propiedad float de CSS Nuestro método de eso).
 |
CSS (Curso)
Diseño Web y de accesibilidad de acuerdo con W3C CSS y XHTML. A partir de 29 €. |
 |
HTML (del curso)
El lenguaje de marcado para la web desde 29 €. |
 |
Javascript (Curso)
Guía completa de scripting del lado del cliente. A partir de 39 €. |