¿Cómo iniciar jQuery Fancybox en la carga de la página?
https://stackoverflow.com/questions/807271
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Me gustaría lanzar un Fancybox (p. ej. versión de Fancybox de un cuadro modal o ligero) en la carga de la página . Podría vincularlo a una etiqueta de anclaje oculta y activar el evento de clic de esa etiqueta de anclaje a través de JavaScript, pero preferiría simplemente iniciar Fancybox directamente y evitar la etiqueta de anclaje adicional.
Solución
Fancybox actualmente no admite directamente una forma de iniciar automáticamente. El trabajo en el que pude trabajar es crear una etiqueta de anclaje oculta y activar su evento de clic. Asegúrese de que su llamada para activar el evento click esté incluida 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>
Otros consejos
Conseguí que esto funcionara llamando a esta función en documento listo:
$(document).ready(function () {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://www.example.com'
});
});
Es simple:
Haz que tu elemento se oculte primero así:
<div id="hidden" style="display:none;">
Hi this is hidden
</div>
Luego llame a su javascript:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#hidden");
});
</script>
Mira 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>
Window.load (en oposición a document.ready ()) parece ser el truco utilizado en las JSFiddler onload demos de Fancybox 2.0 :
$(window).load(function()
{
$.fancybox("test");
});
Tenga en cuenta que puede estar usando document.ready () en otros lugares, y IE9 se molesta con el orden de carga de los dos. Esto te deja con dos opciones: cambiar todo a window.load o usar 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 lo contrario de mis pruebas cuando necesite hacer esto.
¿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!
obtuvo esto de la página de inicio de Fancybox
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>
Para mi caso, lo siguiente puede funcionar correctamente. Cuando se carga la página, la caja de luz aparece inmediatamente.
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>
La respuesta de Alex es genial. Pero es importante tener en cuenta que eso llama al estilo fancybox predeterminado. Si tiene sus propias reglas personalizadas, debe llamar a .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');
});
Realmente logré activar un enlace fancyBox solo desde un archivo JS externo usando " live " evento:
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 ancla al cuerpo:
$('body').append('<a class="iframe pub" href="your-url.html"></a>');
Luego active el fancyBox haciendo " haciendo clic en " el ancla:
$('a.pub').click();
El enlace fancyBox ahora es " casi " Listo. ¿Por qué & Quot; casi & Quot; ? Debido a que parece que necesita agregar algún retraso antes de activar el segundo clic, de lo contrario, el script no está listo.
Es una demora rápida y sucia usar alguna 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
Quizás esto ayude ... esto se usó en el evento de clic de calendario jQuery de tamaño completo ( http: // arshaw .com / fullcalendar / ) ... pero se puede usar de manera más general para tratar con fancybox que está siendo lanzado por 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;
}
También puede usar la función nativa de JavaScript setTimeout() para retrasar el visualización del cuadro después de que el 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>
En caso de que no tenga un botón para hacer clic. Quiero decir, si quieres abrirlo en respuesta ajax, entonces sería así:
$.fancybox({
href: '#ID',
padding : 23,
maxWidth : 690,
maxHeight : 345
});
$(document).ready(function() {
$.fancybox(
'<p>Yes. It works <p>',
{
'autoDimensions' : false,
'width' : 400,
'height' : 200,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
});
Esto ayudará ...
tal vez pueda usar jqmodal , es liviano y fácil de usar. puede mostrar el cuadro modal llamando a
$('.box').jqmShow()
Puede poner un enlace como este (estará oculto. Puede ser anterior a </body>)
<a id="clickbanner" href="image.jpg" rel="gallery"></a>
Y el atributo rel o clase de trabajo como este
$(document).ready(function() {
$("a[rel=gallery]").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
maxWidth : 800,
maxHeight : 600
});
});
Solo hazlo con la función de activación jquery
$( window ).load(function() {
$("#clickbanner").trigger('click');
});
HTML:
<a id="hidden_link" href="LinkToImage"></a>
JS:
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
