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

fancybox pdf

Question

Me gustaría lanzar un Fancybox (por ejemplo, Fancybox''s versión de Fancybox''s 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.

Answer 1

¿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

Answer 2

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 class="iframe pub" href="your-url.html"></a>'');

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

Answer 3

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
});

Answer 4

Es sencillo:

Haga que su elemento se oculte primero así:

<div id="hidden" style="display:none;">
Hi this is hidden
</div>

Luego llama a tu javascript:

<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#hidden");
});
</script>

Echa un vistazo a la imagen a continuación:

Otro ejemplo:

<div id="example2" style="display:none;">
<img src="http://theinstitute.ieee.org/img/07tiProductsandServicesiStockphoto-1311258460873.jpg" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#example2");
});
</script>

Answer 5

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.

<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger(''click'');
});
</script>

Answer 6

La mejor manera que he encontrado es:

<script type="text/javascript">
$(document).ready(function() {
$.fancybox(
$("#WRAPPER_FOR_hidden_div_with_content_to_show").html(), //fancybox works perfect with hidden divs
{
//fancybox options
}
);
});
</script>

Answer 7

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'');
});

Answer 8

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''
});
});

Answer 9

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.

Answer 10

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

<body onload="$(''#aLink'').trigger(''click'');">
<a id="aLink" href="http://www.google.com" >Link</a></body>

<script type="text/javascript">
$(document).ready(function() {
$("#aLink").fancybox({
''width'' : ''75%'',
''height'' : ''75%'',
''autoScale'' : false,
''transitionIn'' : ''none'',
''transitionOut'' : ''none'',
''type'' : ''iframe''
});
});
</script>

Answer 11

Puedes poner un enlace como este (estará oculto. Puede estar antes de </body> )

<a id="clickbanner" href="image.jpg" rel="gallery"></a>

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'');
});

Answer 12

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(''<a id="link_''+calEvent.url+''" style="display: hidden;" href="http://thisweekinblackness.com/wp-content/uploads/2009/01/steve-urkel.jpg">Steve</a>'');
jQuery(''#link_''+calEvent.url).fancybox();
jQuery(''#link_''+calEvent.url).click();
jQuery(''#link_''+calEvent.url).remove();
return false;
}

Answer 13

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.

<a id="reference-first" href="#reference-first-message">Test the Popup</a>
<div style="display: none;">
<div id="reference-first-message" style="width:400px;height:100px;overflow:auto;">
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>
<script type="text/javascript">
$(document).ready(function() {
$("#reference-first").fancybox({
''titlePosition'' : ''inside'',
''transitionIn'' : ''fade'',
''transitionOut'' : ''fade'',
''overlayColor'' : ''#333'',
''overlayOpacity'' : 0.9
}).trigger("click");
//launch on load after 5 second delay
window.setTimeout(''$("#reference-first")'', 5000);
});
</script>

Answer 14

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 ().

Answer 15

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

$(''.box'').jqmShow()

Answer 16

$(document).ready(function() {
$.fancybox(
''<p>Yes. It works <p>'',
{
''autoDimensions'' : false,
''width'' : 400,
''height'' : 200,
''transitionIn'' : ''none'',
''transitionOut'' : ''none''
}
);
});

Esto ayudará..