Domanda Come avviare jQuery Fancybox al caricamento della pagina?


Vorrei lanciare un Fancybox (ad es. Fancybox di versione di una casella modale o chiara) al caricamento della pagina. Potrei legarlo a un tag di ancoraggio nascosto e attivare l'evento click di quel tag di ancoraggio tramite JavaScript, ma preferirei avviare direttamente Fancybox ed evitare il tag di ancoraggio extra.


94
2018-04-30 14:42


origine


risposte:


Fancybox al momento non supporta direttamente un modo per lanciare automaticamente. Il lavoro attorno a cui sono riuscito a lavorare è la creazione di un tag di ancoraggio nascosto e l'attivazione del suo evento click. Assicurati che la tua chiamata per attivare l'evento click sia inclusa dopo che i file jQuery e Fancybox JS sono stati inclusi. Il codice che ho usato è il seguente:

Questo script di esempio è incorporato direttamente nell'HTML, ma potrebbe anche essere incluso in un file JS.

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

158
2018-05-04 17:37



Ho ottenuto questo per funzionare chiamando questa funzione nel documento pronto:

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});

65
2017-09-06 03:14



È semplice:

Rendi il tuo elemento nascosto in questo modo:

<div id="hidden" style="display:none;">
    Hi this is hidden
</div>

Quindi chiama il tuo javascript:

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

Guarda l'immagine qui sotto:

enter image description here

Un altro esempio:

<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
2018-03-29 07:18



Window.load (al contrario di document.ready ()) sembra essere il trucco usato nel JSFiddler scarica demo di Fancybox 2.0:

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

Ricorda che potresti usare document.ready () altrove e IE9 si arrabbia con l'ordine di caricamento dei due. Questo ti lascia con due opzioni: cambia tutto in window.load o usa un setTimer ().


10
2017-08-22 19:48



O usalo nel file JS dopo aver configurato il tuo fancybox:

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

Credo che Fancybox 1.2.1 userà le opzioni predefinite altrimenti dai miei test quando dovevo farlo.


8
2018-02-28 14:59



perché questa non è ancora una delle risposte?

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

ora basta attivare il tuo link !!

ottenuto questo dal Homepage di Fancybox


6
2018-03-30 12:55



Il modo migliore che ho trovato è:

<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
2017-09-16 16:17



Per il mio caso, quanto segue può funzionare correttamente. Quando la pagina è caricata, la lightbox è pop-up immediatamente.

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
2017-11-11 20:16



La risposta di Alex è grandiosa. ma è importante notare che ciò chiama lo stile predefinito di fancybox. Se hai le tue regole personalizzate, dovresti semplicemente chiamare .trigger fare clic su quell'ancora specifica

$(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
2017-10-14 10:12



In realtà sono riuscito a attivare un collegamento fancyBox solo da un file JS esterno utilizzando l'evento "live":

Innanzitutto, aggiungi l'evento di clic in tempo reale sul tuo ancoraggio dinamico futuro:

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

Quindi, aggiungi l'ancora al corpo:

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

Quindi attiva la fancyBox facendo "clic" sull'ancora:

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

Il link fancyBox è ora "quasi" pronto. Perché "quasi"? Perché sembra che sia necessario aggiungere un po 'di ritardo prima di attivare il secondo clic, altrimenti lo script non è pronto.

È un ritardo rapido e sporco che utilizza un'animazione sul nostro ancoraggio ma funziona bene:

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

Ecco qua, il tuo fancyBox dovrebbe apparire onload!

HTH


2
2017-11-28 18:51



Forse questo aiuterà ... questo è stato usato nell'evento jQuery click click full size (http://arshaw.com/fullcalendar/) ... ma può essere usato più in generale per gestire fancybox lanciato da 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
2017-08-09 15:56