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>:
Seguidamente crearemos nuestro contenedor que hará de popup con el contenido que deseemos, en nuestro ejemplo:
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.
Autor
¿Buscas trabajo de programador?
28 respuestas a “Fancybox Onload”
Deja una respuesta
27 artículos que te podrían interesar
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??
Hola,
Gracias por tu mensaje.
En la página oficial de Fancybox hay una API donde se detallan algunos métodos que puedes usar. Para cerrar es algo así:
$.fancybox.close
Lo puedes ver en: http://fancybox.net/api
Hola como se puede hacer, para que aparte de que se muestre automaticamente, tambien despues de unos segundos se cierre solo.
Saludos Cordiales
Hola,
Prueba usar la función setTimeout de javascript. Aquí tienes un ejemplo:
https://www.jose-aguilar.com/blog/hacer-desaparecer-aparecer-div-tras-segundos-con-jquery/
Saludos
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.
Hola,
Puedes emplear la función setTimeOut de javascript. En el siguiente post tienes un ejemplo que podría servirte:
http://www.jose-aguilar.com/blog/ejecutar-una-funcion-cada-x-segundos-con-jquery/
Saludos
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
Hola,
No conseguimos ver los errores indicados pero si se ven en su página otro tipo de errores que deberían ser corregidos.
Saludos
Muchisimas gracias!! Estaba necesitando algo como esto!
Gracias de verdad .. 🙂
Saludos !!
Diego
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
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
Es posible que envies o subas el codigo?
Hola, lo tenemos bastante dificil para hacer un zip para descargar. La solución más rápida es que observes el código fuente del ejemplo. Saludos
buenos dias, soy nuevo en esto, pero me gustaria saber si se podria abrir dos imagenes cuando se carge la pagina principal, es decir.. que me abra una imagen y al cerrarla me salga la otra, muchas gracias
Hola, yo creo que si que es posible. Debes averiguar como en la página oficial del plugin. Saludos
No me funciona…. He copiado las librerias y he bajado el fancy box y nada
quizá debes copiar el código fuente del ejemplo. YO lo veo funcionando
muchas gracias, tenia como 2 horas comiéndome la cabeza y me ayudo mucho
carlitos ..ya he probado hecer un slider co cycle2 de jquery que es fabuloso,,, pero no consigo
enlazar una html dentro ,,,y menos que la arrastre,,,
cycle2- slideshow es mas complicado,,,sale funcionando rapidisimo con imagenes ,,pero con videos iframes o html nada de nada,,,gracias,,si alquien quiere ayudarme,,,carlitos.
tengo un slide pasando img y html,,osea una lista,,ul+li+url().
mas una animacion en css,,,con sus % de tiempo etc,,
bien la duda-pregunta-ayuda es: la imagen si corre pero la html aunque estan dentro del contenedor y el sliding,,no corren,,como sreria un codigo que le permita correr,,gracias todo es css y html.
un abrazo!!!
Hola buenas tardes,
Si nos pasas la url del ejemplo lo podríamos ver en directo y darte un solución.
SAludos
Hola, hice todo como decis, y no funciona. No abre el popup. Comparé código y esta todo igual. ¿Qué puede pasar?
Revisa las librerías jQuery por si fuera ese el problema
Una duda mas si deseo que en el popup linken a otra pagina como coloco el codigo para redirigir a la pagina que deseo?
Hola muy buen tutorial excelente, pero tengo una duda donde coloco la ruta para colocar la imagen en el “Fancybox Onload” al cargar la web, saludos
Hola, debes colocar la imagen dentro del div id=»popup» con la ruta de donde la tengas guardada en el servidor.
como le podria hacer para que no se ejecutara al inicio de pagina?? muy buenos codigos!! gracias!
Aqui tienes un ejemplo:
http://www.jose-aguilar.com/blog/ampliar-una-imagen-utilizando-fancybox/