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.

3 Respuestas a “Ventana Shadowbox al cargar página con jQuery”

  1. ALEXIS 17 mayo, 2011 at 2:59 #

    Por fin encuentro lo que hace rato ando buscando… pero aun no se donde hay que poner este codigo? te agradeceria me explicaras para usarlo en mi blog…
    muchas gracais

  2. admin 18 mayo, 2011 at 8:18 #

    Hola Alexis, tienes un ejemplo abajo, que puedes copiar entero.

  3. aLEX 13 octubre, 2011 at 1:12 #

    Hola muy bueno pero donde consigo el codigo de
    jquery-1.4.2.min.js
    shadowbox-3.0.3/shadowbox.js
    shadowbox-3.0.3/shadowbox.css

    gracias!

Agregar un nuevo comentario