El uso de jQuery
Los frameworks de JavaScript son una alternativa a todos estos métodos
tradicionales y jQuerys 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.
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.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
</ul>
</body>
</html>
|
CSS de la lista
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.
1
|
<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 “clic” que se
efectúa sobre los links.
1
2
3
4
5
6
7
8
9
|
<script>
$(document).ready(function() {
var lista = $('li').hide();
$('#mostrar').click(function()
{
});
$('#ocultar').click(function()
{
});
});
</script>
|
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
variable 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.
1
2
3
4
5
6
|
$('#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.
1
2
3
4
5
6
|
$('#ocultar').click(function() {
var i = $('li').size();
(function ocultarimg() {
lista.eq(--i).fadeOut(200,
ocultarimg);
})();
});
|
Código final
<!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.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://www.lawebera.es/images/servicios-webera-boton.png"></li>
<li><img src="http://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>
|
Mas sin en cambio el soporte es otra de las razones por la cual la utilización de Jquery en nuestros sitios es totalmente recomendada. Esta fantástica librería ha tenido una aceptación muy grande por los programadores lo que ha generado que muchos desarrolladores se dediquen a la creación de plugins o completos que utilizan JQuery. Esto nos permite agregar galerías dinámicas, calendarios sistemas de votación, formularios y muchas otras cosas tan solo agregando los plugins.
ResponderBorrar