¿Cómo se inicia jQuery Fancybox en la carga de la página?

Me gustaría lanzar un Fancybox (por ejemplo, la versión de Fancybox de un cuadro modal o de luces) en la carga de la página. Podría vincularlo a una etiqueta de anclaje oculto y activar el evento de clic de esa etiqueta de anclaje a través de JavaScript, pero prefiero simplemente abrir Fancybox directamente y evitar la etiqueta de anclaje adicional.

Fancybox actualmente no admite directamente una forma de iniciarse automáticamente. El trabajo que pude hacer fue crear una etiqueta de anclaje oculta y desencadenar su evento de clic. Asegúrese de que su llamada para activar el evento click se incluya después de que se incluyan los archivos JQuery y Fancybox JS. El código que utilicé es el siguiente:

Este script de muestra está incrustado directamente en el HTML, pero también podría incluirse en un archivo JS.

 

Lo hice funcionar llamando a esta función en el documento listo:

 $(document).ready(function () { $.fancybox({ 'width': '40%', 'height': '40%', 'autoScale': true, 'transitionIn': 'fade', 'transitionOut': 'fade', 'type': 'iframe', 'href': 'http://www.example.com' }); }); 

Es sencillo:

Haga que su elemento se oculte primero así:

  

Luego llama a tu javascript:

  

Echa un vistazo a la imagen a continuación:

enter image description here

Otro ejemplo:

   

enter image description here

Window.load (en lugar de document.ready ()) parece ser el truco utilizado en las demostraciones de onsload de JSFiddler de Fancybox 2.0 :

 $(window).load(function() { $.fancybox("test"); }); 

Sin tener en cuenta que puede estar utilizando document.ready () en otro lugar, e IE9 se molesta con el orden de carga de los dos. Esto te deja con dos opciones: cambiar todo a window.load o usar un setTimer ().

O use esto en el archivo JS después de configurar su fancybox:

 $('#link_id').trigger('click'); 

Creo que Fancybox 1.2.1 usará las opciones predeterminadas de mis pruebas cuando sea necesario.

¿Por qué aún no es esta una de las respuestas ?:

 $("#manual2").click(function() { $.fancybox([ 'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg', 'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg', { 'href' : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg', 'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' } ], { 'padding' : 0, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'image', 'changeFade' : 0 }); }); 

ahora solo activa tu enlace !!

obtuve esto de la página de Fancybox

La mejor manera que he encontrado es:

  

Para mi caso, lo siguiente puede funcionar con éxito. Cuando se carga la página, la caja de luz aparece de forma emergente.

JQuery: 1.4.2

Fancybox: 1.3.1

  Link 

  

La respuesta de Alex es genial. pero es importante notar que eso llama al estilo de fancybox por defecto. Si tiene sus propias reglas personalizadas, solo debe llamar .trigger haga clic en ese anclaje específico

 $(document).ready(function() { $("#hidden_link").fancybox({ 'padding': 0, 'cyclic': true, 'width': 625, 'height': 350, 'padding': 0, 'margin': 0, 'speedIn': 300, 'speedOut': 300, 'transitionIn': 'elastic', 'transitionOut': 'elastic', 'easingIn': 'swing', 'easingOut': 'swing', 'titleShow' : false }); $("#hidden_link").trigger('click'); }); 

De hecho, logré activar un enlace fancyBox solo desde un archivo JS externo utilizando el evento “en vivo”:

Primero, agregue el evento de clic en vivo en su ancla dinámica futura:

 $('a.pub').live('click', function() { $(this).fancybox(... fancybox parameters ...); }) 

Luego, agregue el anclaje al cuerpo:

 $('body').append(''); 

A continuación, active FancyBox haciendo clic en el delimitador:

 $('a.pub').click(); 

El enlace de FancyBox ahora está “casi” listo. ¿Por qué “casi”? Porque parece que necesita agregar algo de retraso antes de activar el segundo clic, de lo contrario, el script no está listo.

Es un retraso rápido y sucio usando algo de animación en nuestro ancla, pero funciona bien:

 $('a.pub').slideDown('fast', function() { $('a.pub').click(); }); 

¡Aquí tienes, tu FancyBox debería aparecer en carga!

HTH

Tal vez esto ayude … esto se usó en el evento de clic de calendario de jQuery de tamaño completo ( http://arshaw.com/fullcalendar/ ) … pero se puede usar de manera más general para tratar el lanzamiento de fancybox por parte de jQuery.

  eventClick: function(calEvent, jsEvent, view) { jQuery("body").after('Steve'); jQuery('#link_'+calEvent.url).fancybox(); jQuery('#link_'+calEvent.url).click(); jQuery('#link_'+calEvent.url).remove(); return false; } 

También puede usar la función de JavaScript nativa setTimeout() para retrasar la visualización del cuadro después de que DOM esté listo.

 Test the Popup 
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.

En caso de que no tenga el botón para hacer clic. Quiero decir, si quieres abrirlo en una respuesta ajax, sería así:

 $.fancybox({ href: '#ID', padding : 23, maxWidth : 690, maxHeight : 345 }); 
 $(document).ready(function() { $.fancybox( '

Yes. It works

', { 'autoDimensions' : false, 'width' : 400, 'height' : 200, 'transitionIn' : 'none', 'transitionOut' : 'none' } ); });

Esto ayudará..

tal vez puedas usar jqmodal , es liviano y fácil de usar. puede mostrar el cuadro modal llamando

 $('.box').jqmShow() 

Puedes poner un enlace como este (estará oculto. Puede estar antes de )

  

Y trabajando rel atributo o clase como este

 $(document).ready(function() { $("a[rel=gallery]").fancybox({ openEffect : 'elastic', closeEffect : 'elastic', maxWidth : 800, maxHeight : 600 }); }); 

Solo hazlo con la función de jquery trigger

 $( window ).load(function() { $("#clickbanner").trigger('click'); }); 

HTML:

  

JS: