Archive | jQuery RSS feed for this section

Ventana Shadowbox al cargar página con jQuery

21 oct

Cuantas veces hemos necesitado, o nos ha pedido un cliente, destacar alguna oferta, o alguna noticia de mucha importancia en la portada de nuestra página web. Os voy a enseñar una forma bastante elegante de hacerlo con Shadowbox y jQuery.

Anteriormente os mostramos como funcionaba Shadowbox con imágenes, videos y páginas web externas. En este ejemplo utilizaremos la el reproductor html de Shadowbox, y dentro del html meteremos una imagen con el anuncio o promoción que queremos destacar.

<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>
<script type="text/javascript">
$(document).ready(function(){
	setTimeout(function() {
	    Shadowbox.open({
    	    content:    '<div><img src="oferta.jpg"></div>',
    	    player:     "html",
    	    title:      "Oferta",
    	    width:      492,
    	    height:     367
    	});
	}, 50);
});
</script>

Utilizaremos la función Shadowbox.open(), en content meteremos el contenido HTML que se va a mostrar dentro del Shadowbox. En player elegiremos en este caso html. En title podemos poner un título a nuestro Shadowbox que aparecerá exactamente arriba del contenido. Y para terminar especificaremos el ancho y alto de la ventana, con width y height.

Para ejecutar la función Shadowbox.open() añadiremos un setTimeout() con el tiempo en milisegundos deseado. No es necesario utilizar el setTimeout() para ejecutar esta función, pero he preferido hacerlo así, para que vosotros podáis adaptarlo a vuestro gusto y si es necesario, añadir 1 o 2 segundos de tiempo para abrir nuestra ventana.

Cargando contenido dinámico con la función ajax de jQuery

20 oct

Cuando presentamos la página web, os comentamos la facilidad de cargar contenidos dinámicos vía AJAX con jQuery, y ya va siendo hora de enseñaros como hacerlo.

Además de explicaros como cargar contenido dinámico, vamos a enseñaros también la función slideDown para mostrar el contenido cargado y darle un aspecto bastante elegante.

Bueno para empezar necesitamos crear un elemento donde vamos a mostrar los datos obtenidos vía AJAX. En el ejemplo tenemos index.html que es quien recibe los datos, de los archivos contenido.html y contenido_anim.html

En vez de cargar el contenido dinámico una vez hayamos cargado la página, vamos a cargarlos con un botón, de esta forma:

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

	$('#boton_cargar').click(function() {
		$.ajax({
			url: 'contenido.html',
			success: function(data) {
				$('#div_dinamico').html(data);
			}
		});
	});

	$('#boton_cargar_anim').click(function() {
		$.ajax({
			url: 'contenido_anim.html',
			success: function(data) {
				$('#div_dinamico_anim').html(data);
				$('#div_dinamico_anim div').slideDown(1000);
			}
		});
	});

});
</script>

Vamos a explicar un poco la función ajax que se encarga de leer los datos externos:

$.ajax({
	url: 'contenido.html',
	success: function(data) {
		$('#div_dinamico').html(data);
	}
});

Conectamos con contenido.html, que es el archivo externo que vamos a leer, para mostrar su contenido en nuestro sitio web.

Si todo ha funcionado correctamente, el archivo contenido.html existe y carga correctamente, recibiremos una variable data con el contenido del archivo externo.

Una vez que recibimos los datos, con la función html() que sirve para cambiar el contenido html de un elemento, cambiamos el contenido html del elemento div_dinamico que es el que hemos creado para mostrar los datos. Y aquí os mostramos el botón que utilizamos para cargar los datos y el elemento que muestra los datos:

<input name="boton_cargar" id="boton_cargar" type="button" value="Cargar contenido" />

<div name="div_dinamico" id="div_dinamico" class="div_dinamico"></div>

En el otro ejemplo, hacemos exactamente lo mismo, pero mostramos el contenido en un div invisible con display:none y despues lo cambiamos a display:block con la función slideDown para darle un efecto elegante.

$.ajax({
	url: 'contenido_anim.html',
	success: function(data) {
		$('#div_dinamico_anim').html(data);
		$('#div_dinamico_anim div').slideDown(1000);
	}
});

Animación simple utilizando fadeIn y fadeOut de jQuery

19 oct

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.

Nueva versión jQuery 1.4.3

18 oct

Hace un par de días recibimos la llegada de una nueva versión de jQuery, la 1.4.3 versión estable. Ocho meses han pasado desde la última versión 1.4.2.

En cuanto a la nueva versión, incluye mejores de optimización del código existente, importantes cambios en el módulo CSS y nuevas funcionalidades.

Podéis bajar la nueva versión de la web oficial o bien bajarla desde aquí en el enlace de abajo.

jQuery, fadeIn y fadeOut

17 oct

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.

Página 5 de 6« Primera...23456