Tag Archives: fancyBox

fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery

6 ene

Volvemos a la carga, y otra vez para presentaros una función jQuery desarrollada por Jānis Skarnelis. Se trata de fancyBox, un script con el que podemos abrir imágenes, páginas web, videos, etc. De forma muy elegante, en ventanas tipo Popup, con jQuery.

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

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.