Comment lancer jQuery Fancybox au chargement de la page?
https://stackoverflow.com/questions/807271
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je souhaite lancer une Fancybox (par exemple, la version d'une boîte modale ou lumineuse de Fancybox) au chargement de la page . Je pourrais le lier à une balise d'ancrage masquée et déclencher l'événement click de cette balise via JavaScript, mais je préférerais simplement lancer Fancybox directement et éviter la balise d'ancrage supplémentaire.
La solution
Actuellement, Fancybox ne prend pas directement en charge le lancement automatique. Le travail que j'ai pu travailler consiste à créer une balise d'ancrage masquée et à déclencher son événement click. Assurez-vous que votre appel pour déclencher l'événement click est inclus après les fichiers jQuery et Fancybox JS. Le code que j'ai utilisé est le suivant:
Cet exemple de script est incorporé directement dans le code HTML, mais il pourrait également être inclus dans un fichier JS.
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
Autres conseils
Cela a fonctionné en appelant cette fonction dans le document ready:
$(document).ready(function () {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://www.example.com'
});
});
C'est simple:
Fermez d'abord votre élément comme ceci:
<div id="hidden" style="display:none;">
Hi this is hidden
</div>
Ensuite, appelez votre javascript:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#hidden");
});
</script>
Découvrez l'image ci-dessous:
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>
Window.load (par opposition à document.ready ()) semble être le truc utilisé dans les démonstrations JSFiddler onload de Fancybox 2.0 :
$(window).load(function()
{
$.fancybox("test");
});
Bien sûr, vous utilisez peut-être document.ready () ailleurs, et IE9 est bouleversé par l’ordre de chargement des deux. Cela vous laisse deux options: tout changer en window.load ou utiliser un setTimer ().
Ou utilisez-le dans le fichier JS une fois votre fancybox configurée:
$('#link_id').trigger('click');
Je pense que Fancybox 1.2.1 utilisera les options par défaut sinon de mes tests lorsque je devais le faire.
pourquoi n’est-ce pas encore l’une des réponses?
$("#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éclenchez votre lien !!
Cela provient de la page d'accueil de Fancybox
.Le meilleur moyen 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>
Dans mon cas, les éléments suivants peuvent fonctionner correctement. Lorsque la page est chargée, la visionneuse apparaît 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>
La réponse d'Alex est géniale. mais il est important de noter que cela appelle le style fancybox par défaut. Si vous avez vos propres règles personnalisées, appelez simplement .trigger cliquez sur cette ancre 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');
});
J'ai en fait réussi à déclencher un lien fancyBox uniquement à partir d'un fichier JS externe en utilisant le " live " événement:
Ajoutez d’abord l’événement de clic en direct sur votre future ancre 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>');
Ensuite, déclenchez la commande fancyBox en & "cliquant sur &"; l'ancre:
$('a.pub').click();
Le lien fancyBox est maintenant & "presque &"; prêt. Pourquoi & Quot; presque & Quot; ? Parce qu'il semble que vous deviez ajouter un peu de temps avant de déclencher le second clic, sinon le script n'est pas prêt.
C’est un retard rapide et sale qui utilise une animation sur notre ancre, mais cela fonctionne bien:
$('a.pub').slideDown('fast', function() {
$('a.pub').click();
});
Voilà, votre boîte fantaisie devrait apparaître chargée!
HTH
Peut-être que cela vous aidera ... cela a été utilisé dans l'événement de clic du calendrier jQuery ( http: // arshaw .com / fullcalendar / ) ... mais cela peut être utilisé plus généralement pour traiter les fancybox lancées 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;
}
Vous pouvez également utiliser la fonction JavaScript native setTimeout() pour différer affichage de la boîte après que 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>
Dans le cas où vous n'avez pas le bouton à cliquer. Je veux dire si vous voulez l'ouvrir sur une réponse ajax alors ce serait comme ça:
$.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 aidera.
Peut-être pouvez-vous utiliser jqmodal , léger et facile à utiliser. vous pouvez afficher la boîte modale en appelant
$('.box').jqmShow()
Vous pouvez mettre un lien comme ceci (il sera caché. Peut-être avant </body>)
<a id="clickbanner" href="image.jpg" rel="gallery"></a>
Et attribut ou classe rel fonctionnant comme ceci
$(document).ready(function() {
$("a[rel=gallery]").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
maxWidth : 800,
maxHeight : 600
});
});
Faites-le simplement avec la fonction de déclenchement 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>
