Es común querer darle una buena presentación a nuestro sitio utilizando y manejando imá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 jQuery es 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
>>> Para hacernos una idea de lo que queremos conseguir, tenemos el ejemplo aquí. <<<
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="https://www.lawebera.es/images/servicios-webera-boton.png"></li> <li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li> <li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li> <li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li> <li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li> <li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li> <li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li> <li><img src="https://www.lawebera.es/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="https://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="https://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="https://www.lawebera.es/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.
Ver comentarios (11)
Puede ser que con IE8 solo me muestre el primer li? En Firefox, Chrome y Safari en PC y Mac funciona a la perfección.
Muchísimas gracias por el aporte. Me ha sido de gran utilidad. Un saludo
he incorporado esta función tan maravillosa y ha funcionado perfectamente.
La modifiqué, para que su efecto fuera algo parecido a twitter y algo raro sucedió :/, al llegar a la ultima imagen no logro hacer que cargue del principio nuevamente, si alguien pudiese echarme una manito se lo agradecería.
Dejo el código que he modificado del original:
$(document).ready(function() {
var lista = $('li').hide();
$('#mostrar').ready(function() {
var i = 0;
(function mostrarimg() {
lista.eq(i++).fadeIn(1400, mostrarimg);
})();
});
var i = $('li').size();
(function ocultarimg() {
lista.eq(--i).fadeOut(1400, ocultarimg);
i=0;
})();
});
ya lo solucioné xD..
Hola!!! me ha servido bastante el código, pero tengo un problema, lo que pasa es que tengo un menu pero se compone de varias imagenes y lo que quiero es que cada una muestre una imagen separada...
Y con el código al dar clic sobre una imagen se despliegan todas..
Espero me puedas ayudar..
Gracias por este aporte tan interesante y útil, me gustaría poder hacer el mismo efecto 4 veces o más repetidas en la misma pagina, para mostrar logotipos diseñados por años. Lo he intentado pero aparecen todos los logotipos y mi intención es que funcionen independientes pudiendo activar una sección u otra al gusto del usuario. ¿Podrían ayudarme?.
Hola Lucas muchas gracias por el comentario, mira puedes intentar aplicar esta funcionalidad al link
$('#mostrar').click(function(e) {
if($('#mostrar').html() == "Mostrar"){
$('#mostrar').html("Ocultar");
var i = 0;
(function mostrarimg() {
lista.eq(i++).fadeIn(400, mostrarimg);
})();
}else{
var i = $('li').size();
(function ocultarimg() {
lista.eq(--i).fadeOut(200, ocultarimg);
})();
}
});
Con este código utilizamos el contenido del link para saber que tipo de funcionalidad utilizar, ya sea mostrar u ocultar las imágenes, pero también se puede optar por otras opciones como cambiar el ID del link o botón que estás usando, así cuando el link diga Mostrar el id será "#mostrar" y cuando le des click cambie a "#ocultar" y de esa manera tener las dos funcionalidades por separado.
Espero este código te ayude.
Saludos
Hola, me encantó tu aporte, pero yo no sé mucho de javascript, así que te pregunto a ver si me puedes ayudar, ¿se puede poner para que con un mismo botón se pueda mostrar y ocultar?
Muchas gracias Daniel.
Funciona perfectamente,
Gracias por la ayuda
PD: Vas para favoritos xD
Hola Carlos, un gusto que te haya resultado de ayuda el artículo, para realizar lo que pides basta con hacer unas pequeñas modificaciones al código original, en vez de mandar llamar a la función "mostrarimg" al dar clic, la llamaremos al momento en que se carga nuestro documento, para ello basta con remover las líneas que se encuentran entre la sentencia "$('#mostrar').click(function() { }" y colocarlas de la siguiente manera:
$(document).ready(function() {
var lista = $('li').hide();
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);
})();
});
});
Con ello la función y la iniciación de la variable "i" ahora se harán cuando se ejecute la función "ready" la cual se activa al momento en que nuestro documento se carga.
Saludos
Buenas Daniel.
Primero darte las gracias por el aporte que has hecho y me ha servido de gran ayuda. Tengo una duda y a ver si me podrías echar una mano.
Necesito que el efecto que hace cuando pinchas en el botón de mostrar, lo haga al cargar la web automáticamente. Tengo dos imágenes y necesito que aparezca una y luego la otra.
Espero me puedas echar una mano.