Jak uruchomić jQuery Fancybox podczas ładowania strony?

95

Chciałbym uruchomić Fancybox (np . Wersję modalu lub lightboxa Fancybox ) podczas ładowania strony. Mógłbym powiązać go z ukrytym tagiem kotwicy i uruchomić zdarzenie kliknięcia tego tagu kotwicy za pośrednictwem JavaScript, ale wolałbym po prostu uruchomić Fancybox bezpośrednio i uniknąć dodatkowego tagu kotwicy.

Blegger
źródło
Jeśli wejdziesz na oficjalną stronę fancybox ( fancybox.net ), mają one automatyczne wyskakujące okienko, więc możesz sprawdzić źródło strony, aby zobaczyć, jak to zrobili (wskazówka: nie to samo, co zaakceptowana odpowiedź)
Nippysaurus
15
Aby zaoszczędzić trochę czasu innym - $ (function () {$ .fancybox ('<div> Zmień mnie </div>', {padding: 20});});
nikib3ro

Odpowiedzi:

162

Fancybox obecnie nie obsługuje bezpośrednio sposobu automatycznego uruchamiania. Obejście, które udało mi się uruchomić, polega na utworzeniu ukrytego tagu kotwicy i wywołaniu jego zdarzenia kliknięcia. Upewnij się, że wywołanie wywołujące zdarzenie kliknięcia zostało uwzględnione po dołączeniu plików jQuery i Fancybox JS. Kod, którego użyłem, jest następujący:

Ten przykładowy skrypt jest osadzony bezpośrednio w kodzie HTML, ale można go również umieścić w pliku JS.

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
Blegger
źródło
1
tylko FYI $ (dokument) .ready (function () {$ ("# hidden_link"). fancybox (). trigger ('click');}); jest tym samym, co: function LaunchFancyBox () {$ ("# hidden_link"). fancybox (). trigger ('click'); } $ (dokument) .ready (LaunchFancyBox ());
Mark Schultheiss
4
Jest taki sam, jak $(document).ready(LaunchFancyBox());powinien $(document).ready(LaunchFancyBox);. (zwróć uwagę na brak wywołania funkcji na końcu).
Adam Luter
Próbowałem tego, ale bezskutecznie. Musiałem załadować zawartość przez Ajax, a potem dzwonię do $ .fancybox ({... przekazując zawartość.
giubueno.
@Blegger Twoje rozwiązanie $ ("# hidden_link"). Fancybox (). Trigger ('click'); działa idealnie dla mnie.
Mukesh
66

Mam to do pracy, wywołując tę ​​funkcję w dokumencie gotowym:

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});
JordanC
źródło
To nie zadziałało, ponieważ coś poszło nie tak z obsługą parametru href. Animacja „czekaj” jest wyświetlana w nieskończoność.
Boris van Schooten,
3
Warto zauważyć, że wydaje się, że jest to metoda, którą sami twórcy fancyboxa. Jeśli wejdziesz na stronę internetową fancybox ( fancybox.net ), powinieneś zobaczyć modalne okno dialogowe z informacją, że "fancybox2 jest wydany!" ... jeśli spojrzysz na źródło tej strony, zobaczysz, że użyli oni techniki opisanej w tej odpowiedzi.
Nippysaurus
To powinna być akceptowana odpowiedź! Przyjęte rozwiązanie działa, ale dodanie ukrytej kotwicy, przez którą uruchamiasz zdarzenie kliknięcia, nie jest najczystszym, prawda?
luigi7up
Zgoda, użycie ukrytego linku to hack. Zrób to dobrze.
Jamsi
Bardzo prosty! Dzięki! Mam w nim osadzony autoodtwarzanie youtube. Czy jest jakiś sposób na zamknięcie de lightbox zaraz po zakończeniu filmu?
Antonio Almeida,
12

To proste:

Najpierw ukryj swój element w ten sposób:

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

Następnie zadzwoń do swojego javascript:

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

Spójrz na obrazek poniżej:

wprowadź opis obrazu tutaj

Inny przykład:

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

wprowadź opis obrazu tutaj

Hisham Muneer
źródło
10

Window.load (w przeciwieństwie do document.ready ()) wydaje się być sztuczką używaną w demonstracjach JSFiddler onload Fancybox 2.0 :

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

Pamiętaj, że możesz używać document.ready () w innym miejscu, a IE9 denerwuje się kolejnością ładowania tych dwóch. To pozostawia ci dwie opcje: zmień wszystko na window.load lub użyj setTimer ().

Chris S.
źródło
Ta odpowiedź działa lepiej dla mnie, gdy chcę, aby strona zaczynała się od wyskakującego okienka z ostrzeżeniem podobnym do ios, a następnie mógłbym ją zamknąć. Najpopularniejsza odpowiedź, kiedy próbowałem ją wdrożyć, sprawiała, że ​​zawsze, gdy klikałem fancybox.close, element ładował się ponownie, zamiast znikać. Dzięki!
Nathaniel Flick,
Twoja odpowiedź jest najbardziej trafna i w 100% poprawna. Dzięki.
Schalk Keun
8

Lub użyj tego w pliku JS po skonfigurowaniu fancybox:

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

Wierzę, że Fancybox 1.2.1 użyje domyślnych opcji innych niż moje testy, kiedy będę musiał to zrobić.

cynge13
źródło
5

dlaczego to jeszcze nie jest jedna z odpowiedzi ?:

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

teraz po prostu uruchom swój link !!

wziąłem to ze strony głównej Fancybox

Tomasz
źródło
5

Najlepszy sposób, jaki znalazłem, to:

<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
źródło
To się nie powiedzie, ponieważ nawias zamykający opcji jest komentowany.
Teekin
¡Czysto i łatwo! Działa idealnie. Dzięki!
Karolina,
4

W moim przypadku poniższe mogą działać pomyślnie. Po załadowaniu strony lightbox natychmiast się wyskakuje.

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
źródło
3

Odpowiedź Alexa jest świetna. ale ważne jest, aby zauważyć, że wywołuje to domyślny styl fancybox. Jeśli masz własne reguły niestandardowe, po prostu wywołaj .trigger kliknij tę konkretną kotwicę

$(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
źródło
2

Właściwie udało mi się wywołać link fancyBox tylko z zewnętrznego pliku JS za pomocą zdarzenia „na żywo”:

Najpierw dodaj zdarzenie kliknięcia na żywo do przyszłej kotwicy dynamicznej:

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

Następnie dołącz kotwicę do ciała:

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

Następnie uruchom fancyBox poprzez „kliknięcie” kotwicy:

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

Link do fancyBox jest teraz „prawie” gotowy. Dlaczego „prawie”? Ponieważ wygląda na to, że musisz dodać trochę opóźnienia przed uruchomieniem drugiego kliknięcia, w przeciwnym razie skrypt nie będzie gotowy.

To szybkie i brudne opóźnienie przy użyciu animacji na naszej kotwicy, ale działa dobrze:

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

Proszę bardzo, twój fancyBox powinien pojawić się jako załadowany!

HTH

Kapsuła
źródło
1

Może to pomoże ... było to używane w pełnowymiarowym wydarzeniu kliknięcia kalendarza jQuery ( http://arshaw.com/fullcalendar/ ) ... ale może być ogólnie używane do radzenia sobie z fancybox uruchamianym przez 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
źródło
1

Możesz także użyć natywnej funkcji JavaScript, setTimeout()aby opóźnić wyświetlanie pudełka, gdy DOM będzie gotowy.

<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
źródło
1

W przypadku, gdy nie masz przycisku do kliknięcia. Chodzi mi o to, że jeśli chcesz go otworzyć w odpowiedzi Ajax, wyglądałoby to tak:

$.fancybox({
      href: '#ID',
      padding   : 23,
      maxWidth  : 690,
      maxHeight : 345
});
Maha Dev
źródło
1
$(document).ready(function() {
    $.fancybox(
      '<p>Yes. It works <p>',
       {
        'autoDimensions'    : false,
        'width'             : 400,
        'height'            : 200,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
       }
    );
});

To pomoże..

Prabhagaran
źródło
0

Możesz umieścić link w ten sposób (będzie ukryty. Może być wcześniej </body>)

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

I działający atrybut lub klasa rel w ten sposób

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

Po prostu zrób to za pomocą funkcji wyzwalania jquery

$( window ).load(function() {
  $("#clickbanner").trigger('click');
});
nixis
źródło
0

HTML:

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

JS:

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
AnasSafi
źródło
1
Chociaż ten kod może odpowiedzieć na pytanie, dostarczenie dodatkowego kontekstu dotyczącego tego, jak i / lub dlaczego rozwiązuje problem, poprawiłoby długoterminową wartość odpowiedzi.
Nic3500
-1

może możesz użyć jqmodal , jest lekki i łatwy w użyciu. możesz wyświetlić okno modalne, dzwoniąc

$('.box').jqmShow() 
limboy
źródło
Myślę, że to nie działa, ponieważ to nie jest klasa FancyBox
Jose Basilio
1
Moi projektanci chcą, aby wygląd i styl Fancybox wyglądał jak Fancybox, a ja wolałbym nie podejmować wysiłków związanych z wdrożeniem go w jqmodal. Poza tym używamy już Fancybox w witrynie i nie chcę obsługiwać dwóch różnych impmentacji lightboxów.
Blegger