Tag Archives: Lightbox

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.

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.

Shadowbox

14 oct

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.