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