Método sencillo y estético para desplegar nuestras imágenes de manera secuencial con efectos de jQuery
Es común querer darle una buena presentación a nuestro sitio utilizando y manejandoimágenes de manera original, por ello muchas veces recurrimos a métodos que nos permiten crear efectos de alta calidad pero con el defecto que estropean la funcionalidad y el tiempo de respuesta de nuestro sitio.
En muchas ocasiones para lograr esto recurrimos al uso de imágenes grandes, pesadas o dentro de una presentación Flash, lo que arruina en gran medida tanto la estética como el flujo del sitio.
El sitio continuará funcionando pero con respuestas largas y esto solo decrementará en gran medida la demanda de uso de nuestros servicios; ya que la experiencia del usuario al navegar por nuestra página Web será bastante frustrante.
Es por ello que debemos buscar las mejores técnicas para lograr el efecto que deseamos sin necesidad de recurrir a tales usos. Aunque es prácticamente imposible crear un sitio totalmente eficiente para las necesidades de todos los usuarios, debemos lograr reducir cualquier aspecto que pueda estropear su experiencia en el sitio y así este pueda tener éxito.
El uso de jQuery
Los frameworks de JavaScript son una alternativa a todos estos métodos tradicionales y jQueryes uno de los principales. Caracterizado por su sencillo uso y codificación hemos decidido utilizarlo para presentar esta serie de artículos donde explicaremos métodos sencillos, eficientes y estéticos para desplegar en nuestras imágenes de manera original.
En esta ocasión crearemos un efecto para que una serie de imágenes se muestre de manera secuencial, es decir que cada elemento vaya apareciendo en nuestra página de manera progresiva y siguiendo un orden lineal horizontal.
Si bien hay muchas maneras de realizar esta tarea, hoy, en esta ocasión vamos a utilizar una técnica que utiliza funciones recursivas para agregar los efectos.
La estructura HTML
Lo primero que debemos hacer es crear nuestra estructura del documento HTML, donde agregaremos 8 imágenes dentro de una lista desordenada y dos links que llevaran por id “mostrar” y “ocultar”, conteniendo el mismo texto.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Manejo Secuencial de Imagenes</title>
</head>
<body>
<a href="#" id="mostrar">Mostrar</a> / <a href="#" id="ocultar">Ocultar</a>
<ul>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
</ul>
</body>
</html>
CSS de la lista
El siguiente paso es agregarle un estilo a los elementos que componen la lista, para que por defecto no sean mostrados, que no tengan viñetas y se encuentren colocados a la izquierda de la pantalla. Para esto basta con colocar el siguiente bloque de texto dentro de las etiquetas “head”.
<style>
li {
float: left;
list-style: none;
margin: 0 25px 25px 0;
display: none;
}
</style>
Desarrollo del Script
Al concluir con el estilo, iniciamos con el desarrollo del script que se encargará de realizar el efecto sobre las imágenes. Como usaremos jQuery debemos agregar la librería, se recomienda hacer esto mandando llamar el alojamiento que tiene Google.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Una vez hecho esto, lo primero que se toma en cuenta para el desarrollo del script es que al momento de cargar la página se debe mandar llamar una función que determine el número de elementos a mostrar y contenga los dos métodos a llamar mediante los links mostrar y ocultar.
Para esto utilizaremos la sentencia document.ready y dentro de ella cargaremos la función madre que contendrá las dos funciones dependientes que serán activadas mediante el evento “click” que se efectúa sobre los links.
<script>
$(document).ready(function() {
var lista = $('li').hide();
$('#mostrar').click(function() {
});
$('#ocultar').click(function() {
});
});
</script>
Finalmente pasamos a definir el contenido de cada una de las funciones internas, que serán las encargadas de llevar acabo el efecto de mostrar y desplegar de manera secuencial nuestras imágenes.
Para darle un estilo elegante a nuestra transición, usaremos la librería FadeIn y FadeOut de jQuery, las cuales nos permiten agregar efectos de desvanecimiento a cualquier elemento que este contenido en nuestra página, ya sean capas, imágenes o texto.
La función “mostrar” utilizará el efecto FadeIn para que cada imagen se muestre cada 400 ms, y de manera recursiva mande llamar a la función “mostrarimg”.
Para uso de la recursividad crearemos una varible con el nombre de “i” la cual tendrá el valor de 0 como default. Una vez iniciado el ciclo esta variable ira aumentando de valor cada vez que se llame a “mostrarimg”.
Esto dejará de funcionar una vez que la varible i alcance un valor inexistente en la lista. Cuando la función devuelva un elemento que no existe, jQuery devolverá un objeto vacío, y deja de llamar al efecto fadeIn.
$('#mostrar').click(function() {
var i = 0;
(function mostrarimg() {
lista.eq(i++).fadeIn(400, mostrarimg);
})();
});
Lo mismo haremos del lado de la función “ocultar” pero con las siguientes variantes, en vez de utilizar FadeIn utilizaremos FadeOut para ocultar, le daremos un tiempo de 200 ms, esto porque queremos dar la sensación de que el borrado de imágenes es más rápido.
En vez de tomar a “0” como el valor default de la variable “i”, tomaremos el tamaño de nuestra lista como el valor, de esta manera “i” será igual a 8 ya que son 8 los elementos que componen nuestra lista.
Finalmente en vez de incrementar el valor dentro de nuestro ciclo, lo iremos disminuyendo, de esta manera primero desaparecerá la última imagen y el ciclo concluirá con la primera.
$('#ocultar').click(function() {
var i = $('li').size();
(function ocultarimg() {
lista.eq(--i).fadeOut(200, ocultarimg);
})();
});
Código final
El código final de nuestra aplicación queda de la siguiente manera:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Manejo Secuencial de Imagenes</title>
<style>
li {
float: left;
list-style: none;
margin: 0 25px 25px 0;
display: none;
}
</style>
</head>
<body>
<a href="#" id="mostrar">Mostrar</a> / <a href="#" id="ocultar">Ocultar</a>
<ul>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
<li><img src="http://www.tusitio.com/images/servicios-webera-boton.png"></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var lista = $('li').hide();
$('#mostrar').click(function() {
var i = 0;
(function mostrarimg() {
lista.eq(i++).fadeIn(400, mostrarimg);
})();
});
$('#ocultar').click(function() {
var i = $('li').size();
(function ocultarimg() {
lista.eq(--i).fadeOut(200, ocultarimg);
})();
});
});
</script>
</body>
</html>
Conclusión
Esta es una de las opciones más sencillas para poder realizar este tipo de efecto, es fácil tanto en su aplicación como en su desarrollo y una vez dominado esta clase de técnicas no nos llevará más de cinco minutos codificarlas.
Con esto no queremos demeritar lo que se hace y sigue haciendo con Flash, queda claro que no todos pensamos igual, y quizás para muchos siga siendo de su preferencia el ver y utilizar codificaciones de sitios completos en Flash, lo que tratamos de expresar aquí son alternativas que nos ofrecen un mejor rendimiento e incluso una mejor presentación estética, cada quien decidirá la manera de utilizarlas y escogerá las herramientas de su predilección para realizar esta clase de efectos.