web-dev-qa-db-fra.com

Comment lancer jQuery Fancybox au chargement de la page?

Je souhaite lancer une Fancybox (par exemple, la version d'une boîte modale ou légère) de Fancybox au chargement de la page. Je pouvais l'associer à une balise d'ancrage masquée et déclencher l'événement click de cette balise d'ancrage via JavaScript, mais je préférerais simplement lancer directement la Fancybox et éviter ainsi la balise d'ancrage supplémentaire.

jqueryjquery-pluginsfancybox
94
Blegger

Actuellement, Fancybox ne prend pas directement en charge un moyen de se lancer automatiquement. 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 peut également être inclus dans un fichier JS.

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

J'ai obtenu ce travail 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'
        });
});
65
JordanC

C'est simple: 

Faites votre élément caché d'abord 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>

Regardez l'image ci-dessous:

enter image description here

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>

enter image description here

11
Hisham Muneer

Window.load (contrairement à document.ready ()) semble être le truc utilisé dans les démos onload JSFiddler de Fancybox 2.0 :

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

Gardez à l'esprit que vous utilisez peut-être document.ready () ailleurs, et IE9 se fâche avec l'ordre de chargement des deux. Cela vous laisse deux options: tout changer en window.load ou utiliser un setTimer ().

10
Chris S

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.

8
cynge13

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 il suffit de déclencher votre lien !!

obtenu de la homepage Fancybox

6
Thomas

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>
5
arena-ru

Pour mon cas, les éléments suivants peuvent fonctionner avec succès. Lorsque la page est chargée, la lightbox 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>
4
CMen

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, vous devez simplement appeler .trigger click 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');
});
3
Andrew Scott Kimrey

J'ai en fait réussi à déclencher un lien fancyBox uniquement à partir d'un fichier JS externe en utilisant l'événement "live":

Tout d’abord, ajoutez l’événement en direct sur votre future ancre dynamique:

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

Ensuite, attachez l’ancre au corps:

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

Puis déclenchez la fancyBox en "cliquant" sur l'ancre:

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

Le lien fancyBox est maintenant "presque" prêt. Pourquoi "presque"? 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 délai rapide et sale en utilisant une animation sur notre ancre, mais cela fonctionne bien:

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

Voilà, votre fancyBox devrait apparaître en chargement!

HTH

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

CA aidera..

1
Prabhagaran

Vous pouvez également utiliser la fonction JavaScript native setTimeout() pour retarder l’affichage de la boîte une fois 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>
1
John Kary

Peut-être que cela vous aidera ... cela a été utilisé dans l'événement de clic de calendrier de taille réelle jQuery ( http://arshaw.com/fullcalendar/ ) ... mais il peut être utilisé plus généralement pour gérer le lancement de fancybox 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;
  }
1
Leigh

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
});
1
Maha Dev

Vous pouvez mettre un lien comme ceci (il sera caché. Peut-être avant le </body>)

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

Et travailler attribut rel ou classe comme ça

$(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');
});
0
nixis

peut-être pouvez-vous utiliser jqmodal , il est léger et facile à utiliser. vous pouvez afficher la boîte modale en appelant 

$('.box').jqmShow()
0
limboy

HTML:

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

JS:

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