Jak uruchomić jQuery Fancybox podczas ładowania strony?

Question 1

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.

Question 2

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>

Question 3

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

Question 4

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

Question 5

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

Question 6

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

Question 7

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

Question 8

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>

Question 9

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>

Question 10

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

Question 11

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

Question 12

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

Question 13

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>

Question 14

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

Question 15

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

To pomoże..

Question 16

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

Question 17

HTML:

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

JS:

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

Question 18

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

$('.box').jqmShow()