¿Cómo iniciar jQuery Fancybox al cargar la página?

95

Me gustaría lanzar un Fancybox (por ejemplo, la versión de Fancybox de un modal o light box) al cargar 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 prefiero simplemente lanzar Fancybox directamente y evitar la etiqueta de ancla adicional.

jquery jquery-plugins fancybox

— Blegger
fuente

Si vas al sitio web oficial de fancybox ( fancybox.net ), tienen una ventana emergente automática, por lo que puedes verificar la fuente de su página para ver cómo lo hicieron (pista: no es la misma que la respuesta aceptada)

— Nippysaurus

15

Para ahorrar algo de tiempo a los demás - $ (function () {$ .fancybox ('<div> Cambiarme </div>', {padding: 20});});

— nikib3ro

162

Actualmente, Fancybox no admite directamente una forma de iniciarse automáticamente. El trabajo que pude hacer es crear una etiqueta de anclaje oculta y activar su evento de clic. Asegúrese de que su llamada para activar el evento de clic 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>

— Blegger
fuente

1

solo un FYI the $ (document) .ready (function () {$ ("# hidden_link"). fancybox (). trigger ('click');}); es lo mismo que: function LaunchFancyBox () {$ ("# hidden_link"). fancybox (). trigger ('click'); } $ (documento) .ready (LaunchFancyBox ());

— Mark Schultheiss

4

Es lo mismo que $(document).ready(LaunchFancyBox());debería ser $(document).ready(LaunchFancyBox);. (tenga en cuenta la falta de la llamada a la función al final).

— Adam Luter

Intenté esto, pero sin éxito. Tuve que cargar el contenido a través de Ajax y luego llamo $ .fancybox ({... pasando el contenido.

— giubueno

@Blegger Tu solución $ ("# hidden_link"). Fancybox (). Trigger ('click'); funciona perfecto para mí.

— Mukesh

66

Conseguí que esto funcionara 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'
        });
});

— JordanC
fuente

Esto no funcionó para mí porque algo sale mal al manejar el parámetro href. La animación "espera" se muestra eternamente.

— Boris van Schooten

3

Vale la pena señalar que este parece ser el método utilizado por los propios desarrolladores de fancybox. Si te diriges al sitio web de fancybox ( fancybox.net ), deberías ver un cuadro de diálogo modal que te dice que "¡Fancybox2 está disponible!" ... si observa la fuente de esa página, puede ver que han utilizado la técnica descrita en esta respuesta.

— Nippysaurus

¡Esta debería ser la respuesta aceptada! La solución aceptada está funcionando, pero agregar un ancla oculta sobre la que desencadena un evento de clic no es realmente la más limpia, ¿verdad?

— luigi7up

De acuerdo, usar un enlace oculto es un truco. Hazlo bien.

— Jamsi

¡Muy simple! ¡Gracias! Tengo una reproducción automática de YouTube incrustada. ¿Hay alguna forma de cerrar la caja de luz tan pronto como termine el video?

— Antonio Almeida

12

Es sencillo:

Haga que su elemento esté oculto 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:

ingrese la descripción de la imagen aquí

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>

ingrese la descripción de la imagen aquí

— Hisham Muneer
fuente

10

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

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

Tenga en cuenta que puede estar usando 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 ().

— Chris S
fuente

Esta respuesta funciona mejor para mí cuando quiero que una página comience con una ventana emergente de advertencia similar a ios y luego pueda cerrarla. La respuesta más popular cuando intenté implementarla hizo que cada vez que hiciera clic en fancybox.close, el elemento se recargaría en lugar de desaparecer. ¡Gracias!

— Nathaniel Flick

Su respuesta señor es la más relevante y 100% correcta. Gracias.

— Schalk Keun

8

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.

— cynge13
fuente

5

¿Por qué todavía 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 inicio de Fancybox

— Thomas
fuente

5

La mejor forma 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>

— arena-ru
fuente

Esto fallará porque se comenta el corchete de cierre de las opciones.

— Teekin

¡Limpio y fácil! Funciona perfecto. ¡Gracias!

— Carolina

4

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>

— CMen
fuente

3

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, simplemente debe llamar a .trigger y hacer clic en ese ancla 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');
});

— Andrew Scott Kimrey
fuente

2

De hecho, logré activar un enlace de fancyBox solo desde un archivo JS externo usando el evento "en vivo":

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

$('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 clic" en el ancla:

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

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

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

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

Aquí tienes, ¡tu fancyBox debería aparecer cargado!

HTH

— Cápsula
fuente

1

Tal vez esto ayude ... esto se usó en el evento de clic del calendario jQuery de tamaño completo ( http://arshaw.com/fullcalendar/ ) ... pero se puede usar de manera más general para lidiar con el lanzamiento de fancybox 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;
  }

— Leigh
fuente

1

También puede utilizar la función JavaScript nativa setTimeout()para retrasar la visualización del cuadro una vez 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>

— John Kary
fuente

1

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

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

— Maha Dev
fuente

1

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

Esto ayudará..

— Prabhagaran
fuente

0

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

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

Y trabajando atributo rel o clase como esta

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

Solo hazlo con la función de activación de jquery

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

— nixis
fuente

0

HTML:

<a id="hidden_link" href="LinkToImage"></a>

JS:

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

— AnasSafi
fuente

1

Si bien este código puede responder a la pregunta, proporcionar un contexto adicional sobre cómo y / o por qué resuelve el problema mejoraría el valor de la respuesta a largo plazo.

— Nic3500

-1

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

$('.box').jqmShow()

— limboy
fuente

No creo que esto funcione porque esa no es la clase de FancyBox

— Jose Basilio

1

Mis diseñadores quieren la apariencia de Fancybox, y preferiría no hacer el esfuerzo de intentar implementarlo para jqmodal. Además, ya estamos usando Fancybox en el sitio y no quiero admitir dos implementaciones de caja de luz diferentes.

— Blegger