Actualidad jQuery

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.

• Ejemplo

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.

• Ejemplo
• Shadowbox 3.0.3