Primeramente, bajamos fancyBox desde aquí o desde su página web oficial:

• fancyBox-v2.0.4.zip

Una vez que lo tengáis descargado, lo primero que tenéis que hacer es incluir la función dentro de nuestro sitio web:

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../js/jquery.fancybox.css" />

Incluimos los Javascript de jQuery y fancyBox y el CSS de fancyBox.

Para hacerlo funcionar solo tenemos que especificarle un "id" o "class" a nuestros enlaces para después ejecutar fancyBox sobre ese "id" o "class".

En este caso hemos utilizado el enlace con clase (class="ejemplo_1") sobre una imagen que vamos a ampliar. Mostramos la imagen en pequeño (foto1p.jpg) y obviamente vamos a ampliar la imagen (foto1.jpg) que fancyBox coge automáticamente del "href" del enlace:

<a class="ejemplo_1" href="../img/foto1.jpg" title="Imagen simple"><img src="../img/foto1p.jpg" width="200" height="150" /></a>

Ahora vamos a ejecutar la función fancyBox sobre el enlace con este sencillo código:

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

Recordaros que fancyBox es prácticamente 100% personalizable, en su web oficial encontrareis toda la documentación necesaria para realizar cambios de aspeto, funcionamiento, etc.

En este otro ejemplo vamos a abrir una página web externa en HTML, primero preparamos el enlace:

<a class="ejemplo_4" href="ejemplo.html">Abrir página web externa - ejemplo.html</a>

Como es lógico, la página que se abrirá dentro del fancyBox la coge del "href" del enlace.

Y aquí tenemos el código Javascript que abrirá la página web externa:

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_4").fancybox({
		'autoScale'		: false,
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'width'			: 680,
		'height'		: 450,
		'type'			: 'iframe'
	});
});
</script>

En el código le especificamos que es un "iframe", que el ancho de la ventana es 680 pixeles y la altura son 450 pixeles.

Los parámetros que le hemos especificado son en Inglés, pero se entiende bastante bien para que sirven.

Como os comentaba antes, recordar que es 100% personalizable y tenéis toda la documentación en su web oficial.

Aquí os dejamos unos ejemplos interactivos de su funcionamiento.

• Ejemplo

Por lo general, la mayoría de los artículos se basan en funciones de jQuery, en los que explicamos su funcionamiento con ejemplos. Para que poco a poco vayáis creando vuestras propias funciones y vuestros propios Scripts en jQuery.

En este caso, vamos a hacer una excepción, y os vamos a enseñar una función en jQuery desarrollada por Ivan Lazarevic, para realizar transiciones de imágenes con un resultado realmente espectacular.

Podéis descargarlo de su web oficial, o bien desde aquí:

• Descargar
• workshop.rs

Una vez que lo tengáis descargado, lo primero que tenéis que hacer es incluir la función dentro de nuestro sitio web:

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="../js/coin-slider-styles.css" />

Incluimos los Javascript de jQuery y Coin Slider y el CSS de Coin Slider.

Para hacerlo funcionar solo tenemos que meter todas las imágenes que queramos dentro de una tabla o una capa y especificarle un "id" para después ejecutar Coin Slider sobre ese "id".

En este caso, hemos utilizado una capa con id (id="animacion"):

<div class="animacion" id="animacion"></div>

Y hemos incluido estas imágenes:

<div class="animacion" id="animacion">
<img src="../img/foto1.jpg" width="600" height="450" />
<img src="../img/foto2.jpg" width="600" height="450" />
<img src="../img/foto3.jpg" width="600" height="450" />
<img src="../img/foto4.jpg" width="600" height="450" />
<img src="../img/foto5.jpg" width="600" height="450" />
</div>

Aunque no es imprescindible, es mejor que las imágenes estén ocultas (style="display:none;") y Coin Slider se encargará de mostrarlas.

Y para terminar, tenéis que ejecutar la función Coin Slider sobre la capa:

<script type="text/javascript">
$(document).ready(function(){
	$('#animacion').coinslider();
});
</script>

Aquí tenéis un ejemplo básico de como funciona Coin Slider en jQuery:

• Ejemplo

Hoy vamos a explicar los efectos de los que disponemos en jQuery para ocultar una capa, en vez de el fadeOut como os expliqué anteriormente.

Primero vamos a empezar con la función fadeOut. Esta función se encarga de modificar el nivel de opacidad de la capa / tabla de 100 a 0 en el tiempo que nosotros le indiquemos. Como en el ejemplo con 2 segundos:

$('#div_fadeOut').fadeOut(2000);

La función slideUp se encarga de ocultar la capa / tabla reduciendo su altura, en el tiempo que nosotros le indiquemos. En este caso la capa pasa de tener 450 pixeles de alto a tener 0, creando un efecto muy elegante.

$('#div_slideUp').slideUp(2000);

La función hide por defecto lo que hace es ocultar la capa / tabla modificando el ancho / alto de esta, comenzando por la esquina inferior derecha, terminando por la esquina superior izquierda. En este caso pasa de tener 600 pixeles de ancho y 450 de alto a tener 0 pixeles de ancho y 0 pixeles de alto. Es bastante parecido a fadeOut.

$('#div_hide').hide(2000);

Y para terminar la función css. Con esta función cambiamos el display:block a display:none sin efecto ninguno.

$('#div_css').css("display","none");

Aquí tenéis un ejemplo con las 5 funciones.

• Ejemplo

Con el evento mouseenter y mouseleave podemos ejecutar una función asociada a dicha acción, al pasar por encima de un elemento, y al sacar el ratón del elemento.

Estos eventos son ideales para imágenes, para ejecutar alguna acción al pasar por encima de una imagen. Para realizar menús animados, al pasar por encima de un enlace, cambiar el color del fondo, el tamaño de la fuente, mover la posición del texto, etc.

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_img").mouseenter(function() {
		alert("Hemos metido el ratón dentro del elemento con clase ejemplo_img");
	});
	$(".ejemplo_img").mouseleave(function() {
		alert("Hemos sacado el ratón fuera del elemento con clase ejemplo_img");
	});
});
</script>
<div class="ejemplo_img"><img src="foto1.jpg" width="600" height="450" /></div>

Una vez que ya sabemos como utilizar estos eventos de posición del ratón, vamos a ejecutar una pequeña animación al pasar por encima de la imagen.

Con la función animate() de jQuery podemos animar un elemento cambiando su css, width, height, left, right, top, opacity, margin, fontsize, etc. En este ejemplo vamos a ocultar en css el título, y al pasar por encima de la imagen, con animate() vamos a cambiar su css y mostrarlo poco a poco con esta pequeña animación.

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_img").mouseenter(function() {
		$(".ejemplo_img_cont", this).stop().animate({ top:'390px' },{ queue:false, duration:300 });
	});
	$(".ejemplo_img").mouseleave(function() {
		$(".ejemplo_img_cont", this).stop().animate({ top:'450px' },{ queue:false, duration:300 });
	});
});
</script>

Por defecto le ponemos el top en 450px para ocultarlo debajo de la foto, y al pasar por encima (mouseenter) lo cambiamos a 390px para mostrarlo. Una vez que sacamos el ratón fuera (mouseleave) de la imagen,volvemos a poner el top en 450px para ocultarlo otra vez. Un ejemplo muy sencillo pero práctico para nuestros proyectos.

• Ejemplo

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.

• Ejemplo