Fancybox Onload

FancyBox es una de los mejores plugins para abrir en un popup imágenes, contenido HTML y multimedia al estilo “lightbox” flotante sobre la página web.

Ya hemos hablado varias veces de este plugin pero esta vez me gustaría compartir como poder abrir una ventana popup utilizando fancybox al cargar la página.

Para utilizar este plugin lo primero que tienes que hacer es descargarte la última versión de la página oficial de Fancybox.

La carpeta más importante de los archivos que te descargas es la carpeta source. Ahí tienes los estilos y scripts del plugin además de las imágenes que emplea. Esa carpeta deberías incorporarla en tu proyecto. Yo por ejemplo, la he renombrado como “fancybox”.

Entonces, tan solo te queda invocar la librería jQuery y los 2 archivos clave del fancybox en tu cabecera <head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.5" media="screen" />

Seguidamente crearemos nuestro contenedor que hará de popup con el contenido que deseemos, en nuestro ejemplo:

<div id="popup" style="display: none; width: 560px;">
<h2>Fancybox Content</h2>
Lorem Ipsum...
 
</div>

Y finalmente deberemos incluir antes de la etiqueta de cierre </body> o dentro de la cabecera <head> la llamada al fancybox y utilizar la función trigger() de jQuery para lanzar el evento.

<script>
$(document).ready(function () {
    $(".fancybox").fancybox();
    $(".fancybox").trigger('click');
});
</script>

También lo podríamos hacer de otra forma. En el <body> de la página añadir la llamada a la función trigger() correspondiente.

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (9 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

28 respuestas a “Fancybox Onload”

  1. Edi AC dice:

    Saludos, sabemos que al cerrar la ventana de fancybox, la pagina que la contiene se recarga; como puedo cerrar la ventana sin que la pagina se recargue. Anduve en el código de fancybox; hay una línea que hace posible la recarga y es esta: // Create a close button
    if (current.closeBtn) {
    $(current.tpl.closeBtn).appendTo(F.skin).bind(‘click.fb’, function(e) {
    e.preventDefault();
    F.close();
    location.reload();
    // alert(‘Se refrescó’);
    });
    }
    He comentado la línea location.reload(), pero no cierra en cambio la ventana, puedes ayudarme??

  2. Jorge Cifuentes dice:

    Hola como se puede hacer, para que aparte de que se muestre automaticamente, tambien despues de unos segundos se cierre solo.

    Saludos Cordiales

  3. Jorge Cifuetes dice:

    Hola, gracias por tus ayudas, una consulta, como se hace para que una vez que habrá el popup, se cierre en forma automática en unos 10 seg.

  4. Luvin Rafael dice:

    Podrias ayudarme? Me da estos errores:

    ?m=1:5 Uncaught ReferenceError: $ is not defined(anonymous function) @ ?m=1:5
    ?m=1:192 GET http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js
    ?m=1:11 GET http://www.luvinrafael.com/fancybox/jquery.fancybox.js?v=1.8.3&m=1
    ?m=1:12 GET http://www.luvinrafael.com/fancybox/jquery.fancybox.css?v=1.8.3&m=1 404 (Not Found)
    ?m=1:187 Uncaught SyntaxError: Unexpected token &
    ?m=1:192 GET http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js
    2adsbygoogle.js:11Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0Fb @ adsbygoogle.js:11mc @ adsbygoogle.js:19af @ adsbygoogle.js:66(anonymous function) @ adsbygoogle.js:68(anonymous function) @ adsbygoogle.js:68

    Esta es mi pagina web: LuvinRafael.com
    Saludos

  5. Diego dice:

    Muchisimas gracias!! Estaba necesitando algo como esto!
    Gracias de verdad .. 🙂

    Saludos !!

    Diego

  6. Fernando dice:

    que tal de primeras muchas gracias por el codigo, una consulta como puedo hacer para poner un iframe en el popup apenas habra la ventana

    • Jose Aguilar dice:

      hola, yo creo que en tu caso debes substitur Lorem Ipsum… del ejemplo por el código de tu iframe. Confírmanos si es correcto, saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre