Como iniciar o jQuery Fancybox no carregamento da página?

95

Gostaria de lançar um Fancybox (por exemplo , uma versão do Fancybox de um modal ou caixa de luz) no carregamento da página. Eu poderia vinculá-lo a uma tag âncora oculta e disparar o evento click dessa tag âncora via JavaScript, mas prefiro apenas iniciar o Fancybox diretamente e evitar a tag âncora extra.

jquery jquery-plugins fancybox

— Blegger
fonte

Se você for ao site oficial do fancybox ( fancybox.net ), eles terão um pop-up automático, então você pode verificar o código-fonte da página para ver como eles fizeram (dica: não é o mesmo que a resposta aceita)

— Nippysaurus

15

Para economizar algum tempo para os outros - $ (function () {$ .fancybox ('<div> Altere-me </div>', {padding: 20});});

— nikib3ro,

162

O Fancybox atualmente não oferece suporte direto para uma forma de inicialização automática. A solução que consegui fazer foi criar uma tag de âncora oculta e acionar seu evento de clique. Certifique-se de que sua chamada para acionar o evento de clique seja incluída após os arquivos jQuery e Fancybox JS serem incluídos. O código que usei é o seguinte:

Este script de amostra é incorporado diretamente no HTML, mas também pode ser incluído em um arquivo JS.

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

— Blegger
fonte

1

apenas um FYI o $ (document) .ready (function () {$ ("# link_ oculto"). fancybox (). trigger ('click');}); é o mesmo que: function LaunchFancyBox () {$ ("# link_coberto"). fancybox (). trigger ('click'); } $ (document) .ready (LaunchFancyBox ());

— Mark Schultheiss

4

É o mesmo que $(document).ready(LaunchFancyBox());deveria ser $(document).ready(LaunchFancyBox);. (observe a falta da chamada de função no final).

— Adam Luter

Eu tentei fazer isso, mas sem sucesso. Tive que carregar o conteúdo via Ajax aí chamo $ .fancybox ({... passando o conteúdo.

— giubueno

@Blegger Sua solução $ ("# link_ oculto"). Fancybox (). Trigger ('clique'); funciona perfeito para mim.

— Mukesh

66

Eu fiz isso funcionar chamando esta função no documento pronto:

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

— JordanC
fonte

Isso não funcionou para mim porque algo deu errado ao manipular o parâmetro href. A animação de "espera" é exibida para sempre.

— Boris van Schooten

3

É importante notar que este parece ser o método que os próprios desenvolvedores do fancybox usam. Se você for ao site do fancybox ( fancybox.net ), deverá ver uma caixa de diálogo modal informando que "fancybox2 foi lançado!" ... se você olhar a fonte dessa página, verá que eles usaram a técnica descrita nesta resposta.

— Nippysaurus

Esta deve ser a resposta aceita! A solução aceita está funcionando, mas adicionar uma âncora oculta sobre a qual você aciona um evento de clique não é realmente a mais limpa, não é?

— luigi7up

Concordo, usar um link oculto é um hack. Faça certo.

— Jamsi

Muito simples! Obrigado! Eu tenho um youtube de reprodução automática incorporado nele. Existe alguma maneira de fechar a mesa de luz assim que o vídeo terminar?

— Antonio Almeida

12

É simples:

Faça seu elemento oculto primeiro assim:

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

Em seguida, chame o seu javascript:

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

Veja a imagem abaixo:

insira a descrição da imagem aqui

Outro exemplo:

<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>

insira a descrição da imagem aqui

— Hisham Muneer
fonte

10

Window.load (em oposição a document.ready ()) parece ser o truque usado nas demos onload JSFiddler do Fancybox 2.0 :

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

Tenha em mente que você pode estar usando document.ready () em outro lugar, e o IE9 fica chateado com a ordem de carregamento dos dois. Isso deixa você com duas opções: mude tudo para window.load ou use um setTimer ().

— Chris S
fonte

Essa resposta funciona melhor para mim quando desejo que uma página comece com um aviso do tipo ios e, em seguida, seja capaz de fechá-la. A resposta mais popular quando tentei implementá-lo tornava-se tão sempre que clicava em fancybox.close, o elemento recarregava em vez de desaparecer. Obrigado!

— Nathaniel Flick

Sua resposta, senhor, é a mais relevante e 100% correta. Obrigado.

— Schalk Keun

8

Ou use isso no arquivo JS depois que sua caixa fantasia estiver configurada:

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

Acredito que o Fancybox 1.2.1 usará as opções padrão do meu teste quando eu precisar fazer isso.

— cynge13
fonte

5

por que ainda não é uma das respostas ?:

$("#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
    });
});

agora é só acionar seu link !!

obtive isso na página inicial do Fancybox

— Thomas
fonte

5

A melhor maneira que encontrei é:

<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
fonte

Isso falhará porque o colchete de fechamento das opções está comentado.

— Teekin

¡Limpo e fácil! Funciona perfeitamente. Obrigado!

— Carolina

4

No meu caso, o seguinte pode funcionar com sucesso. Quando a página é carregada, o lightbox é exibido imediatamente.

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
fonte

3

A resposta de Alex é ótima. mas é importante notar que isso chama o estilo fancybox padrão. Se você tem suas próprias regras personalizadas, você deve apenas chamar .trigger e clicar nessa âncora específica

$(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
fonte

2

Na verdade, consegui acionar um link fancyBox apenas de um arquivo JS externo usando o evento "ao vivo":

Primeiro, adicione o evento de clique ao vivo em sua futura âncora dinâmica:

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

Em seguida, anexe a âncora ao corpo:

$('body').append('<a class="iframe pub" href="your-url.html"></a>');

Em seguida, acione o fancyBox clicando na âncora:

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

O link fancyBox agora está "quase" pronto. Por que "quase"? Porque parece que você precisa adicionar algum atraso antes de acionar o segundo clique, caso contrário, o script não estará pronto.

É um atraso rápido e sujo usando alguma animação em nossa âncora, mas funciona bem:

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

Aqui está, seu fancyBox deve aparecer no carregamento!

HTH

— Cápsula
fonte

1

Talvez isso ajude ... isso foi usado no evento de clique do calendário jQuery em tamanho real ( http://arshaw.com/fullcalendar/ ) ... mas pode ser usado de forma mais geral para lidar com o fancybox sendo lançado pelo 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
fonte

1

Você também pode usar a função JavaScript nativa setTimeout()para atrasar a exibição da caixa depois que o DOM estiver pronto.

<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
fonte

1

Caso você não tenha um botão para clicar. Quero dizer, se você quiser abri-lo em uma resposta ajax, será assim:

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

— Maha Dev
fonte

1

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

Isso vai ajudar..

— Prabhagaran
fonte

0

Você pode colocar um link como este (ficará oculto. Pode ser antes </body>)

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

E trabalhar o atributo rel ou classe como este

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

Basta fazer isso com a função de gatilho jquery

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

— nixis
fonte

0

HTML:

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

JS:

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

— AnasSafi
fonte

1

Embora este código possa responder à pergunta, fornecer contexto adicional sobre como e / ou por que ele resolve o problema melhoraria o valor da resposta a longo prazo.

— Nic3500

-1

talvez você possa usar jqmodal , é leve e fácil de usar. você pode mostrar a caixa modal chamando

$('.box').jqmShow()

— limboy
fonte

Não acho que funcione porque essa não é a classe do FancyBox

— José Basilio

1

Meus designers querem a aparência do Fancybox, e eu preferiria não me esforçar para implementá-lo no jqmodal. Além disso, já estamos usando o Fancybox no site e não quero oferecer suporte a duas compactações de caixa de luz diferentes.

— Blegger