Ventana emergente al cargar la pagina

Vamos a ver como podemos conseguir que nuestros visitantes se vean sorprendidos por una ventana que aparece al abrir la pagina, y desaparece al cabo de unos segundosPara realizar esta pequeña maravilla (o sera tontería?) vamos a utilizar parte de ese material gratuito que corre por Internet, pensado para hacernos la vida mas fácil. Se trata de la librería jQuery y de la librería fancybox.

Para poder utilizar estos componentes deberemos primero descargar y guardar en vuestro servidor la librería fancybox, para ello, podéis descargarla de:

http://fancybox.googlecode.com/files/jquery.fancybox-1.3.4.zip,

A continuación, creáis en vuestra web un directorio js, dentro, un directorio jquery y descomprimís lo que habéis descargado en esa capeta. Eso os creará una nueva carpeta llamada jquery.fancybox-1.3.4, bien, ya tenemos una cosa lista y ordenada.

Si queréis revisar lo que habéis descargado, veréis que viene todo lo necesario para poder hacer una prueba de esta librería, con un fichero index.html que os presenta ejemplos de como funciona.

Realmente, lo único que nosotros necesitamos en nuestra web para utilizar este efecto es lo que va dentro de la carpeta fancybox, por lo que en mi instalación, he borrado los demás ficheros y carpetas y he subido el nivel de esos ficheros, y me ha quedado la estructura

Os lo comento, porque todas las referencias se harán a esta estructura.

Una vez tenemos en nuestra web los módulos, pasamos a añadir a nuestra pagina index (o en la que queráis crear el efecto) las llamadas a las rutinas, poniendo en HEAD

Hemos llamado a jquery desde las librerías de google, a fancybox desde nuestro web, y también hemos cargado la hoja de estilos típica de fancybox.

A continuación, y en cualquier lugar de nuestra pagina, ya que no se vera, vamos a crear la referencia,En esta prueba, lo que vamos a mostrar en la ventana emergente, es contenido que ya esta en la pagina, por lo que creamos un enlace diciendo:

href=»#informacion» title=»»>

«ancla» es el nombre que asociaremos al fancybox, mientras que «informacion» es el nombre que le pondremos al div que contenga lo que queramos mostrar.

Creamos el div con el contenido:

<div id="elemento">
<div id="informacion" >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Etiam quis mi eu elit tempor facilisis id et neque. 
 Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare.
 Nulla et lorem eu nibh adipiscing ultricies nec at lacus. 
Cras laoreet ultricies sem, at blandit mi eleifend aliquam. 
Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. 
Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, 
quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, 
faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. 
Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. 
Aenean tempus lacus vitae orci posuere porttitor eget non felis. 
Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
</div>
</div>

Vamos a detenernos un momento en un detalle; nuestro parrafo lo hemos encerrado en dos div, es un pequeño recurso para conseguir que quede oculto hasta que lo mostremos en la pantalla emergente; para ello, en el head deberemos añadir un estilo

Si os fijáis, veréis que le aplico «display:none» a nuestro div, solo cuando esta debajo de «elemento», por lo que cuando se presente en el fancybox, ya no estará debajo de elemento, y sera visible.

Ya lo tenemos todo preparado, pero todavía no hace nada. Para darle movimiento al tema, deberemos escribir un pequeño script:

 < script type="text/javascript">
    $(document).ready(function() {
        $("#ancla").fancybox({
        'width'                : '75%',
        'height'            : '75%',
        'autoScale'         : false,
        'transitionIn'        : 'none',
        'transitionOut'        : 'none',       
        'onComplete': function(){
                    setTimeout( function() {$.fancybox.close(); },5000); // 5000 = 5 secs
                  }
    });
        $("#ancla").eq(0).trigger('click');
    });

Lo comentamos:

$(document).ready(function() {

Es la forma que tenemos de decirle a jQuery que todo lo que viene a continuación, queremos que se ejecute cuando se termine de cargar la pagina.

        $("#ancla").fancybox({
        'width'                : '75%',
        'height'            : '75%',
        'autoScale'         : false,
        'transitionIn'        : 'none',
        'transitionOut'        : 'none',

        'onComplete': function(){
                    setTimeout( function() {$.fancybox.close(); },5000); // 5000 = 5 secs
                  }
    });

Con estas lineas definimos la ventana emergente, el ancho, el alto, y las transiciones de entrada y salida que deseamos.

Aquí, debemos señalar lo que hacemos en ‘onComplete’, esta linea se procesará cuando la ventana emergente acabe de cargar, y utilizamos la funcion setTimeout para lanzar la orden de cierre de ventana (function() {$.fancybox.close(); }) con un retraso de 5000 milisegundos…(5 segundos).

Con esto, conseguimos que cuando esta ventana se cargue, se activará el contador, y en 5 segundos se cerrará.

Ahora solo queda conseguir que se inicie al cargar la ventana, y eso lo logramos provocando un click sobre el link que hemos definido , y como no queremos que el usuario, lo haga, hacemos que lo haga javascript con:

$("#ancla").eq(0).trigger('click');

y ya esta, puedes ver este efecto en accion aquí

 También os quiero comentar que posteriormente he escrito dos artículos mas, sobre el uso de ventanas emergentes, uno de ellos, para utilizar datos proporcionados por Yii,y otro que al abrirse llama a una pagina que vosotros decidís, por lo que se transforma en un sistema muy cómodo para presentar datos en una ventana emergente