Actualidad jQuery

Hace poco os enseñamos como trabajar con las funciones fadeIn y fadeOut de jQuery, pero con ejemplos poco prácticos, hoy vamos a darle un uso bastante práctico para hacer pequeñas animaciones sin Flash, con HTML y jQuery.

Empezaremos como siempre, añadiendo jQuery a nuestro sitio web, y vamos a definir unas variables de tiempo, para poder cambiar rápidamente la duración de nuestra animación, el tiempo del fade, el tiempo de inicio, etc.

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var tiempo_inicio_anim = 200;
	var tiempo_entre_img = 3000;
	var tiempo_fade = 1000;
});
</script>

Una vez hemos definido las variables, utilizando setTimeout vamos a ejecutar una función con la variable tiempo_inicio_anim que nos dirá cuando ejecutar la animacion:

<script type="text/javascript">
$(document).ready(function(){

	var tiempo_inicio_anim = 200;
	var tiempo_entre_img = 3000;
	var tiempo_fade = 1000;

	function animacion_simple() {

	}

	setTimeout(function() {
		animacion_simple();
	}, tiempo_inicio_anim);

});
</script>

A los 200 milisegundos como indica la variable tiempo_inicio_anim, ejecutaremos la función animacion_simple();

Vamos a añadir 3 imágenes para hacer fadeIn y fadeOut.

<div class="animacion_img">
<img src="foto1.jpg" width="600" height="450" class="foto1" />
<img src="foto2.jpg" width="600" height="450" class="foto2" />
<img src="foto3.jpg" width="600" height="450" class="foto3" />
</div>

Una vez que ya tenemos hecho el principio de nuestro script para que inicie la animación, y el HTML con las 3 imágenes, vamos a hacer la animación tirando de fadeIn y fadeOut, mostrando y ocultando las 3 imágenes de nuestro ejemplo:

<script type="text/javascript">
$(document).ready(function(){

	var tiempo_inicio_anim = 200;
	var tiempo_entre_img = 3000;
	var tiempo_fade = 1000;

	function animacion_simple() {

		// Mostramos la foto 1
		$(".foto1").fadeIn(tiempo_fade);

		// Cuando pasen otros 3000 milisegundos, ocultamos la foto 1 y mostramos la foto 2
		setTimeout(function() {
			// Ocultamos la foto 1
			$(".foto1").fadeOut(tiempo_fade);
			// Mostramos la foto 2
			$(".foto2").fadeIn(tiempo_fade);
		}, tiempo_entre_img);

		// Cuando pasen otros 3000 milisegundos, ocultamos la foto 2 y mostramos la foto 3
		setTimeout(function() {
			// Ocultamos la foto 2
			$(".foto2").fadeOut(tiempo_fade);
			// Mostramos la foto 3
			$(".foto3").fadeIn(tiempo_fade);
		}, tiempo_entre_img*2);

		// Cuando pasen otros 3000 milisegundos, ocultamos la foto 3 y volvemos a iniciar la animación
		setTimeout(function() {
			// Ocultamos la foto 3
			$(".foto3").fadeOut(tiempo_fade);
			// Iniciamos otra vez la animación
			animacion_simple();
		}, tiempo_entre_img*3);

	}

	//Empezamos la animación a los 200 milisegundos
	setTimeout(function() {
		animacion_simple();
	}, tiempo_inicio_anim);

});
</script>

Ya tenemos el Script terminado, se podría haber hecho un poco más automático, buscando el número de imágenes dentro del div animacion_img, pero para empezar, es un ejemplo bastante sencillo y creo que legible y facil de entender para todos.

Aquí tenéis el ejemplo.

• Ejemplo

Hoy vamos a enseñaros como trabajar con las funciones fadeIn y fadeOut de Jquery, que más adelante nos servirán para trabajar con galerías de imágenes, menús desplegables, formularios interactivos, etc.

Con estas funciones podemos añadir un efecto fade en imágenes, capas, textos, etc, en nuestros sitios web.

fadeIn es para mostrar y fadeOut es la inversa, para ocultar, funcionan de la siguiente forma:

fadeIn( tiempo_milisegundos , función_callback );
fadeOut( tiempo_milisegundos , función_callback );

Por defecto el tiempo_milisegundos es de 400, en realizar el efecto. Mostramos un ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".imagen1").fadeIn();
});
</script>

En este ejemplo, se aplicaría el efecto fade a la imagen con clase imagen1. Otra forma podría ser aplicar el efecto, una vez hayamos hecho click sobre un botón, como el siguiente ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#boton').click(function() {
		$(".imagen1").fadeIn();
	});
});
</script>

En estos ejemplos, utilizaríamos el valor por defecto del fadeIn / fadeOut de 400 milisegundos y sin función callback. La función callback la podríamos utilizar para ejecutar otra acción una vez terminado el efecto, como en este ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#imagen3botonact').click(function() {
		$(".imagen3").fadeIn(2000,accion_despues_de_mostrar_imagen);
	});
	function accion_despues_de_mostrar_imagen () {
		alert("Imagen mostrada");
	}
});
</script>

Aquí tenéis varios ejemplos con fadeIn y fadeOut.

• Ejemplo

Hoy os vamos a presentar Shadowbox. Con Shadowbox podemos abrir una imagen, una galería de imágenes, una página web externa en HTML, una animación SWF o incluso videos de Youtube, Quicktime, Yahoo! video, Vimeo, etc.

Podemos conseguir un efecto muy elegante, en apenas 1 minuto de trabajo.

Para descargar la librería nos iremos a la página web oficial (shadowbox-js.com) y en la sección de Download, seleccionaremos como adaptador jQuery, seleccionaremos nuestro idioma y marcaremos todos los checkbox para tener compatibilidad al 100% con imagenes, videos, html externos, etc.

Simplemente tendremos que añadir la librería Shadowbox así:

<link href="../shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript"> Shadowbox.init({ language: "es", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); </script>

Como vemos en este ejemplo, primero incluimos jQuery (jquery-1.4.2.min.js), y después la librería Shadowbox (shadowbox.js), tanto el archivo .JS como el .CSS con los estilos.

Una vez incluida la librería Shadowbox, simplemente tendremos que añadir el parametro rel="shadowbox" dentro de la etiqueta <a>

<ul>
<li><a href="foto1.jpg" rel="shadowbox"><img src="foto1_p.jpg" width="200" height="150" /></a></li>
</ul>

Si queremos hacer una galería de fotos, simplemente tendríamos que agregar el número de la galería detrás del shadowbox, por ejemplo el 0:

<ul>
<li><a href="foto1.jpg" rel="shadowbox[0]"><img src="foto1_p.jpg" width="200" height="150" /></a></li>
<li><a href="foto2.jpg" rel="shadowbox[0]"><img src="foto2_p.jpg" width="200" height="150" /></a></li>
<li><a href="foto3.jpg" rel="shadowbox[0]"><img src="foto3_p.jpg" width="200" height="150" /></a></li>
</ul>

Si quisiéramos hacer alguna galería más dentro de la misma página, podríamos poner shadowbox[1], shadowbox[2], etc. Tantas como galerías queramos hacer…

Os dejo los ejemplos que os he comentado, más un ejemplo de video en Youtube y enlace a página externa, en este caso a Google.

• Ejemplo
• Shadowbox 3.0.3