Je voudrais lancer un Fancybox (par exemple Fancybox's version d'une boîte modale ou lumineuse) au chargement de la page. Je pourrais le lier à une balise d'ancrage cachée et déclencher l'événement click de cette balise d'ancrage via JavaScript, mais je préférerais lancer directement la Fancybox et éviter la balise d'ancrage supplémentaire.Comment lancer jQuery Fancybox au chargement de la page?
Actuellement, Fancybox ne prend pas directement en charge le lancement automatique. Le travail autour de moi a été capable de créer un tag d'ancrage caché et de déclencher son événement click. Assurez-vous que votre appel pour déclencher l'événement click est inclus après l'inclusion des fichiers JQuery et Fancybox JS. Le code que j'ai utilisé est le suivant:
Cet exemple de script est intégré directement dans le code HTML, mais il peut également être inclus dans un fichier JS.
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
juste un FYI le $ (document) .ready (function() {$ ("# hidden_link"). Fancybox(). Trigger ('click');}); est la même que: function LaunchFancyBox() { $ ("# hidden_link"). Fancybox(). Trigger ('clic'); } $ (document) .ready (LaunchFancyBox()); –
Est identique à '$ (document) .ready (LaunchFancyBox());' devrait être '$ (document) .ready (LaunchFancyBox);'. (Notez l'absence de l'appel de fonction à la fin). –
J'ai essayé, mais sans succès. J'ai dû charger le contenu via Ajax puis j'appelle $ .fancybox ({... en passant le contenu.) – giubueno
peut-être vous pouvez utiliser jqmodal, il est léger et facile à utiliser. vous pouvez afficher la boîte modale en appelant
$('.box').jqmShow()
Je ne pense pas que cela fonctionne parce que ce n'est pas la classe de la FancyBox –
Mes concepteurs veulent l'apparence de Fancybox, et je préférerais ne pas faire l'effort de l'implémenter pour jqmodal. De plus, nous utilisons déjà Fancybox sur le site et je ne veux pas prendre en charge deux différentes impédations de boîte à lumière. – Blegger
Ou utiliser dans le fichier JS après votre fancybox est mis en place:
$('#link_id').trigger('click');
Je crois Fancybox 1.2.1 utilisera les options par défaut sinon de mes tests quand je devais le faire.
En fait, je réussi à déclencher un lien fancybox uniquement à partir d'un fichier JS externe en utilisant l'événement « en direct »:
D'abord, ajoutez l'événement click en direct sur votre futur ancrage dynamique:
$('a.pub').live('click', function() {
$(this).fancybox(... fancybox parameters ...);
})
Ensuite, , ajoutez l'ancre au corps:
$('body').append('<a class="iframe pub" href="your-url.html"></a>');
déclenchent ensuite le fancyBox en "cliquant" l'ancre:
$('a.pub').click();
Le lien fancyBox est maintenant "presque" prêt. Pourquoi "presque"? Parce qu'il semble que vous ayez besoin d'ajouter un peu de retard avant de déclencher le second clic, sinon le script n'est pas prêt.
Il est un délai rapide et sale en utilisant une animation sur notre ancre, mais il fonctionne bien:
$('a.pub').slideDown('fast', function() {
$('a.pub').click();
});
Ici, vous allez, votre FancyBox devrait apparaître onload!
HTH
Peut-être que cela vous aidera ... cela a été utilisé dans la pleine taille jQuery événement click calendrier (http://arshaw.com/fullcalendar/) ... mais il peut être plus généralement utilisé pour traiter fancybox lancé par 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;
}
J'ai eu que cela fonctionne en appelant cette fonction dans le document prêt:
$(document).ready(function() {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://www.example.com'
});
});
Cela n'a pas fonctionné pour moi parce que quelque chose ne va pas avec la manipulation du paramètre href L'animation "wait" montre pour toujours –
Il est à noter que cela semble être la méthode que les développeurs de fancybox eux-mêmes. le site web fancybox (http://fancybox.net) vous devriez voir une boîte de dialogue modale vous disant que "fancybox2 est sorti!" ... si vous regardez la source de cette page, vous pouvez voir qu'ils ont utilisé la technique décrite – Nippysaurus
Ceci devrait être la réponse acceptée La solution acceptée fonctionne, mais ajouter une ancre cachée sur laquelle vous déclenchez un clic n'est pas vraiment la plus propre, n'est-ce pas? – luigi7up
Pour mon cas, il peut y travailler avec succès. Lorsque la page est chargée, la boîte à lumière s'affiche immédiatement.
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>
réponse Alex est grande. mais il est important de noter que cela appelle le style fancybox par défaut. Si vous avez vos propres règles personnalisées, vous devez simplement appeler .trigger cliquez sur ce point d'ancrage spécifique
$(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');
});
pourquoi est-ce pas une des réponses encore ?:
$("#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
});
});
maintenant déclencher simplement votre lien !!
a obtenu ce de la Fancybox homepage
La meilleure façon que j'ai trouvé est:
<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>
Vous pouvez également utiliser la fonction native JavaScript setTimeout() pour retarder l'affichage de la boîte après le DOM est prêt .
<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>
window.load (par opposition à document.ready()) semble l'être le truc utilisé dans le JSFiddler onload demos of Fancybox 2.0:
$(window).load(function()
{
$.fancybox("test");
});
nu à l'esprit que vous pouvez utiliser document.ready() ailleurs, et IE9 se fâche avec l'ordre de chargement des deux. Cela vous laisse avec deux options: tout changer à window.load ou utiliser un setTimer().
Cette réponse fonctionne mieux pour moi quand je veux qu'une page commence avec un pop-up d'avertissement de type ios et ensuite pouvoir le fermer. La réponse la plus populaire lorsque j'ai essayé de l'implémenter l'a fait tellement de fois que j'ai cliqué sur fancybox.close que l'élément rechargerait au lieu de s'en aller. Merci! –
Votre réponse monsieur est la plus pertinente et 100% correcte. Merci. –
Vous pouvez mettre le lien comme celui-ci (il sera caché. Peut-être avant </body>)
<a id="clickbanner" href="image.jpg" rel="gallery"></a>
Et travailler attribut rel ou classe comme celui-ci
$(document).ready(function() {
$("a[rel=gallery]").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
maxWidth : 800,
maxHeight : 600
});
});
Il suffit de le faire avec jquery fonction de déclenchement
$(window).load(function() {
$("#clickbanner").trigger('click');
});
est simple:
Faites votre élément caché d'abord comme ceci:
<div id="hidden" style="display:none;">
Hi this is hidden
</div>
appellent ensuite votre javascript:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#hidden");
});
</script>
Vérifiez l'image ci-dessous:
Un autre exemple:
<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>
Si vous n'avez pas de bouton à cliquer.Je veux dire que si vous voulez l'ouvrir sur la réponse ajax alors ce serait comme ceci:
$.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'
}
);
});
Cela vous aidera ..
Si vous allez sur le site web officiel de fancybox (http: // fancybox.net) ils ont un popup automatique, donc vous pouvez vérifier leur source de page pour voir comment ils l'ont fait (indice: pas la même que la réponse acceptée) – Nippysaurus
Pour gagner du temps pour les autres - $ (function() { $ .fancybox ('