Como lançar jQuery FancyBox no carregamento da página?
https://stackoverflow.com/questions/807271
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Gostaria de lançar um FancyBox (por exemplo versão de FancyBox de uma caixa modal ou luz) no carregamento da página . Eu poderia vinculá-lo a uma marca de âncora ocultos e acionar o evento clique de que marca de âncora via JavaScript, mas eu preferia apenas lançar o FancyBox diretamente e evitar a marca de âncora extra.
Solução
FancyBox atualmente não suporta diretamente uma maneira de lançamento automaticamente. O trabalho em torno eu era capaz de começar a trabalhar é a criação de uma marca de âncora escondido e provocando-o de eventos click. Certifique-se de sua chamada para disparar o evento de clique é incluída depois que os arquivos jQuery e FancyBox JS estão incluídos. O código que usei é a seguinte:
Este script de exemplo está 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>
Outras dicas
Eu tenho isso para trabalho, chamando essa 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'
});
});
É simples:
Faça o seu elemento escondido primeira como esta:
<div id="hidden" style="display:none;">
Hi this is hidden
</div>
Em seguida, chamar o seu javascript:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#hidden");
});
</script>
Confira a imagem abaixo:
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>
window.load (em oposição a document.ready ()) parece ser o da doçura utilizada na JSFiddler ONLOAD demos de FancyBox 2.0 :
$(window).load(function()
{
$.fancybox("test");
});
Bare em mente que você pode estar usando document.ready () em outro lugar, e IE9 fica chateado com a ordem de carregamento dos dois. Isso deixa você com duas opções:. Mudança tudo para window.load ou usar um SetTimer ()
Ou use este no arquivo JS após o fancybox está configurado:
$('#link_id').trigger('click');
Eu acredito FancyBox 1.2.1 usará opções padrão de outra forma do meu teste quando eu precisava fazer isso.
Por que não é esta uma das respostas ainda:?
$("#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, basta acionar o link !!
tem isso a partir do FancyBox homepage
A melhor maneira que eu 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>
Para o meu caso, o seguinte pode funcionar com êxito. Quando a página é carregada, a mesa de luz é pop-up 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>
A resposta de Alex é grande. Mas é importanting notar que que chama o estilo fancybox padrão. Se você tem suas próprias regras personalizadas, você deve apenas chamar .trigger clicar essa â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');
});
Eu realmente conseguiu desencadear uma ligação FancyBox apenas a partir de um arquivo JS externo usando o evento "ao vivo":
Primeiro, adicione o evento clique ao vivo em seu futuro âncora dinâmico:
$('a.pub').live('click', function() {
$(this).fancybox(... fancybox parameters ...);
})
Em seguida, anexar a âncora para o corpo:
$('body').append('<a class="iframe pub" href="your-url.html"></a>');
Em seguida, acionar o FancyBox por "clicar" a â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 está pronto.
É um atraso rápida e suja usando alguma animação em nosso âncora, mas ele funciona bem:
$('a.pub').slideDown('fast', function() {
$('a.pub').click();
});
Aqui está, o seu deve aparecer FancyBox ONLOAD!
HTH
Talvez isto ajude ... isso foi usado no tamanho completo jQuery evento de calendário clique ( http: // arshaw .com / FullCalendar / ) ... mas ele pode ser usado de forma mais geral para lidar com fancybox sendo lançado pela 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;
}
Você também pode usar a função nativa JavaScript setTimeout() para atrasar a exibição de a caixa após o DOM está 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>
No caso, se você não tem botão para clicar. Quero dizer, se você quiser abri-lo em ajax resposta, então seria assim:
$.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'
}
);
});
Isso vai ajudar ..
talvez você pode usar jqModal , é leve e fácil de usar. você pode mostrar a caixa modal chamando
$('.box').jqmShow()
Você pode colocar link como este (que serão ocultados. Pode ser antes </body>)
<a id="clickbanner" href="image.jpg" rel="gallery"></a>
E trabalhar atributo rel ou classe como este
$(document).ready(function() {
$("a[rel=gallery]").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
maxWidth : 800,
maxHeight : 600
});
});
Apenas fazê-lo com a função jquery gatilho
$( 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>
