Ventana Shadowbox al cargar página con 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