Come avviare jQuery Fancybox al caricamento della pagina?

95

Vorrei lanciare un Fancybox (es . La versione di Fancybox di un modal o light box) al caricamento della pagina. Potrei associarlo a un tag di ancoraggio nascosto e attivare l'evento clic di quel tag di ancoraggio tramite JavaScript, ma preferirei semplicemente avviare Fancybox direttamente ed evitare il tag di ancoraggio aggiuntivo.

jquery jquery-plugins fancybox

— Blegger
fonte

Se vai al sito web ufficiale di fancybox ( fancybox.net ) hanno un popup automatico, quindi puoi controllare la fonte della loro pagina per vedere come hanno fatto (suggerimento: non è la stessa della risposta accettata)

— Nippysaurus

15

Per risparmiare tempo per gli altri: $ (function () {$ .fancybox ('<div> Change me </div>', {padding: 20});});

— nikib3ro

162

Fancybox attualmente non supporta direttamente un modo per l'avvio automatico. Il lavoro che ho potuto ottenere è la creazione di un anchor tag nascosto e l'attivazione del suo evento clic. Assicurati che la chiamata per attivare l'evento clic sia inclusa dopo aver incluso i file jQuery e Fancybox JS. 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>

— Blegger
fonte

1

solo per tua informazione il $ (document) .ready (function () {$ ("# hidden_link"). fancybox (). trigger ('click');}); è lo stesso di: function LaunchFancyBox () {$ ("# hidden_link"). fancybox (). trigger ('click'); } $ (documento) .ready (LaunchFancyBox ());

— Mark Schultheiss

4

È lo stesso che $(document).ready(LaunchFancyBox());dovrebbe essere $(document).ready(LaunchFancyBox);. (notare la mancanza della chiamata di funzione alla fine).

— Adam Luter

L'ho provato, ma senza successo. Ho dovuto caricare il contenuto tramite Ajax quindi ho chiamato $ .fancybox ({... passando il contenuto.

— giubueno

@Blegger La tua soluzione $ ("# hidden_link"). Fancybox (). Trigger ('click'); funziona perfettamente per me.

— Mukesh

66

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

— JordanC
fonte

Questo non ha funzionato per me perché qualcosa va storto con la gestione del parametro href. L'animazione "aspetta" mostra per sempre.

— Boris van Schooten

3

Vale la pena notare che questo sembra essere il metodo che gli stessi sviluppatori di fancybox. Se vai al sito web di fancybox ( fancybox.net ) dovresti vedere una finestra di dialogo modale che ti dice che "fancybox2 è stato rilasciato!" ... se guardi la fonte per quella pagina puoi vedere che hanno usato la tecnica descritta in questa risposta.

— Nippysaurus

Questa dovrebbe essere la risposta accettata! La soluzione accettata funziona, ma l'aggiunta di un'ancora nascosta su cui si attiva un evento clic non è davvero la più pulita, vero?

— luigi7up

D'accordo, l'utilizzo di un collegamento nascosto è un hack. Fallo bene.

— Jamsi

Molto semplice! Grazie! Ho incorporato un youtube con riproduzione automatica. C'è un modo per chiudere il lightbox non appena finisce il video?

— Antonio Almeida

12

È semplice:

Rendi il tuo elemento nascosto per primo 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:

inserisci qui la descrizione dell'immagine

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>

inserisci qui la descrizione dell'immagine

— Hisham Muneer
fonte

10

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

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

Tieni presente 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 ().

— Chris S
fonte

Questa risposta funziona meglio per me quando voglio che una pagina inizi con un messaggio di avviso simile a iOS e quindi sia in grado di chiuderla. La risposta più popolare quando ho provato a implementarlo lo rendeva così ogni volta che facevo clic su fancybox. Chiudere l'elemento si ricaricava invece di andare via. Grazie!

— Nathaniel Flick

La tua risposta, signore, è molto pertinente e corretta al 100%. Grazie.

— Schalk Keun

8

Oppure usalo nel file JS dopo che la tua fancybox è stata configurata:

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

Credo che Fancybox 1.2.1 utilizzerà le opzioni predefinite altrimenti dai miei test quando avevo bisogno di farlo.

— cynge13
fonte

5

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 attiva il tuo link !!

ottenuto dalla homepage di Fancybox

— Tommaso
fonte

5

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>

— arena-ru
fonte

Questo fallirà perché la parentesi di chiusura delle opzioni è commentata.

— Teekin

¡Pulito e facile! Funziona perfettamente. Grazie!

— Carolina

4

Nel mio caso, quanto segue può funzionare correttamente. Quando la pagina viene caricata, la lightbox viene visualizzata 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>

— CMen
fonte

3

La risposta di Alex è fantastica. ma è importante notare che questo richiama lo stile fancybox predefinito. 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');
});

— Andrew Scott Kimrey
fonte

2

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

Innanzitutto, aggiungi l'evento clic dal vivo sul tuo futuro ancoraggio dinamico:

$('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 il fancyBox "facendo clic" sull'ancora:

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

Il collegamento 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 alcune animazioni sul nostro ancoraggio ma funziona bene:

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

Ecco fatto, il tuo fancyBox dovrebbe apparire in caricamento!

HTH

— Capsula
fonte

1

Forse questo aiuterà ... questo è stato utilizzato nell'evento di clic del calendario jQuery a grandezza naturale ( http://arshaw.com/fullcalendar/ ) ... ma può essere utilizzato 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;
  }

— Leigh
fonte

1

È inoltre possibile utilizzare la funzione JavaScript nativa setTimeout()per ritardare la visualizzazione della casella dopo che il DOM è pronto.

<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
fonte

1

Nel caso in cui non si dispone di un pulsante per fare clic. Voglio dire, se vuoi aprirlo su una risposta ajax, allora sarebbe così:

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

— Maha Dev
fonte

1

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

Questo aiuterà..

— Prabhagaran
fonte

0

Puoi inserire un link in questo modo (sarà nascosto. Potrebbe essere prima </body>)

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

E lavorare l'attributo rel o la classe in questo modo

$(document).ready(function() {
    $("a[rel=gallery]").fancybox({
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        maxWidth    : 800,
        maxHeight   : 600
    });
});

Basta farlo con la funzione trigger jquery

$( window ).load(function() {
  $("#clickbanner").trigger('click');
});

— nixis
fonte

0

HTML:

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

JS:

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

— AnasSafi
fonte

1

Sebbene questo codice possa rispondere alla domanda, fornire un contesto aggiuntivo su come e / o perché risolve il problema migliorerebbe il valore a lungo termine della risposta.

— Nic3500

-1

forse puoi usare jqmodal , è leggero e facile da usare. puoi mostrare la casella modale chiamando

$('.box').jqmShow()

— limboy
fonte

Non penso che funzioni perché non è la classe del FancyBox

— Jose Basilio

1

I miei designer vogliono l'aspetto e le sensazioni di Fancybox e preferirei non tentare di implementarlo per jqmodal. Inoltre stiamo già utilizzando Fancybox sul sito e non voglio supportare due diverse impmentazioni di light box.

— Blegger