Comment lancer jQuery Fancybox lors du chargement de la page?

95

Je souhaite lancer une Fancybox (par exemple la version Fancybox d'une boîte modale ou lumineuse) lors du chargement de la page. Je pourrais le lier à une balise d'ancrage cachée et déclencher l'événement de clic de cette balise d'ancrage via JavaScript, mais je préfère simplement lancer la Fancybox directement et éviter la balise d'ancrage supplémentaire.

jquery jquery-plugins fancybox

— Blegger
source

Si vous allez sur le site Web officiel de fancybox ( fancybox.net ), ils ont une fenêtre contextuelle automatique, vous pouvez donc vérifier la source de leur page pour voir comment ils l'ont fait (indice: pas le même que la réponse acceptée)

— Nippysaurus

15

Pour gagner du temps pour les autres - $ (function () {$ .fancybox ('<div> Change me </div>', {padding: 20});});

— nikib3ro

162

Fancybox ne prend actuellement pas en charge directement un moyen de lancement automatique. Le travail autour duquel j'ai pu travailler consiste à créer une balise d'ancrage cachée et à déclencher son événement de clic. Assurez-vous que votre appel pour déclencher l'événement de clic est inclus une fois que les fichiers jQuery et Fancybox JS sont inclus. Le code que j'ai utilisé est le suivant:

Cet exemple de script est intégré directement dans le HTML, mais il peut également être inclus dans un fichier JS.

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

— Blegger
source

1

juste un FYI le $ (document) .ready (function () {$ ("# hidden_link"). fancybox (). trigger ('click');}); est le même que: function LaunchFancyBox () {$ ("# hidden_link"). fancybox (). trigger ('click'); } $ (document) .ready (LaunchFancyBox ());

— Mark Schultheiss

4

Est-ce le même que $(document).ready(LaunchFancyBox());devrait être $(document).ready(LaunchFancyBox);. (notez l'absence de l'appel de fonction à la fin).

— Adam Luter

J'ai essayé cela, mais sans succès. J'ai dû charger le contenu via Ajax puis j'appelle $ .fancybox ({... en passant le contenu.

— giubueno

@Blegger Votre solution $ ("# hidden_link"). Fancybox (). Trigger ('click'); fonctionne parfaitement pour moi.

— Mukesh

66

J'ai fait fonctionner cela 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'
        });
});

— JordanieC
source

Cela n'a pas fonctionné pour moi car quelque chose ne va pas avec la gestion du paramètre href. L'animation "attendre" se montre pour toujours.

— Boris van Schooten

3

Il est à noter que cela semble être la méthode que les développeurs de fancybox eux-mêmes. Si vous vous rendez sur le site Web de fancybox ( fancybox.net ), vous devriez voir une boîte de dialogue modale vous indiquant que "fancybox2 est sorti!" ... si vous regardez la source de cette page, vous pouvez voir qu'ils ont utilisé la technique décrite dans cette réponse.

— Nippysaurus

Cela devrait être la réponse acceptée! La solution acceptée fonctionne, mais l'ajout d'une ancre cachée sur laquelle vous déclenchez un événement de clic n'est pas vraiment la plus propre, n'est-ce pas?

— luigi7up

D'accord, l'utilisation d'un lien caché est un hack. Fais-le bien.

— Jamsi

Très simple! Merci! J'ai un youtube intégré en lecture automatique. Existe-t-il un moyen de fermer la lightbox dès la fin de la vidéo?

— Antonio Almeida

12

C'est simple:

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

entrez la description de l'image ici

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>

entrez la description de l'image ici

— Hisham Muneer
source

10

Window.load (par opposition à document.ready ()) semble être l'astuce utilisée dans les démos onload de 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 avec deux options: tout changer en window.load ou utiliser un setTimer ().

— Chris S
source

Cette réponse fonctionne mieux pour moi lorsque je veux qu'une page commence avec une fenêtre d'avertissement de type iOS, puis que je puisse la fermer. La réponse la plus populaire lorsque j'ai essayé de l'implémenter faisait que chaque fois que je cliquais sur fancybox.close, l'élément se rechargerait au lieu de disparaître. Merci!

— Nathaniel Flick

Votre réponse monsieur est la plus pertinente et la plus correcte à 100%. Merci.

— Schalk Keun

8

Ou utilisez ceci dans le fichier JS après la configuration de votre fancybox:

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

Je pense que Fancybox 1.2.1 utilisera les options par défaut de mes tests lorsque j'aurai besoin de le faire.

— cynge13
source

5

pourquoi n'est-ce pas encore 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 simplement votre lien !!

obtenu ceci sur la page d'accueil de Fancybox

— Thomas
source

5

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>

— arène-ru
source

Cela échouera car le crochet fermant des options est commenté.

— Teekin

¡Propre et facile! Fonctionne parfaitement. Merci!

— Carolina

4

Pour mon cas, ce qui suit peut fonctionner avec succès. Lorsque la page est chargée, la lightbox s'affiche immédiatement.

JQuery: 1.4.2

Boîte fantaisie: 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
source

3

La réponse d'Alex est excellente. mais il est important de noter que cela appelle le style de 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');
});

— Andrew Scott Kimrey
source

2

En fait, j'ai 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 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>');

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 délai avant de déclencher le deuxième 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 téléchargement!

HTH

— Capsule
source

1

Peut-être que cela aidera ... cela a été utilisé dans l'événement de clic du calendrier jQuery en taille réelle ( http://arshaw.com/fullcalendar/ ) ... mais cela 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;
  }

— Leigh
source

1

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>

— John Kary
source

1

Au cas où vous n'avez pas de bouton sur lequel cliquer. Je veux dire si vous voulez l'ouvrir sur une réponse ajax, ce serait comme ceci:

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

— Maha Dev
source

1

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

CA aidera..

— Prabhagaran
source

0

Vous pouvez mettre un lien comme celui-ci (il sera masqué. Peut-être avant </body>)

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

Et un attribut ou une classe de travail comme celui-ci

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

— nixis
source

0

HTML:

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

JS:

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

— AnasSafi
source

1

Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire sur la façon et / ou pourquoi il résout le problème améliorerait la valeur à long terme de la réponse.

— Nic3500

-1

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

$('.box').jqmShow()

— limboy
source

Je ne pense pas que cela fonctionne car ce n'est pas la classe de la FancyBox

— Jose Basilio

1

Mes concepteurs veulent le look et la convivialité de Fancybox, et je préférerais ne pas essayer 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 impmentations de boîtes à lumière différentes.

— Blegger