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

Answer 1

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.

jquery jquery-plugins fancybox 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

Answer 2

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

Answer 3

15

Aby zaoszczędzić trochę czasu innym - $ (function () {$ .fancybox ('<div> Zmień mnie </div>', {padding: 20});});

nikib3ro

Answer 4

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

Answer 5

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

Answer 6

4

Jest taki sam, jak $(document).ready(LaunchFancyBox());powinien $(document).ready(LaunchFancyBox);. (zwróć uwagę na brak wywołania funkcji na końcu).

Adam Luter

Answer 7

Próbowałem tego, ale bezskutecznie. Musiałem załadować zawartość przez Ajax, a potem dzwonię do $ .fancybox ({... przekazując zawartość.

giubueno.

Answer 8

@Blegger Twoje rozwiązanie $ ("# hidden_link"). Fancybox (). Trigger ('click'); działa idealnie dla mnie.

Mukesh

Answer 9

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,

Answer 10

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,

Answer 11

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

Answer 12

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

Answer 13

Zgoda, użycie ukrytego linku to hack. Zrób to dobrze.

Jamsi

Answer 14

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,

Answer 15

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

Answer 16

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

Answer 17

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,

Answer 18

Twoja odpowiedź jest najbardziej trafna i w 100% poprawna. Dzięki.

Schalk Keun

Answer 19

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

Answer 20

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

Answer 21

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,

Answer 22

To się nie powiedzie, ponieważ nawias zamykający opcji jest komentowany.

Teekin

Answer 23

¡Czysto i łatwo! Działa idealnie. Dzięki!

Karolina,

Answer 24

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>

Answer 25

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

Answer 26

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

Answer 27

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

Answer 28

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>

Answer 29

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

Answer 30

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

To pomoże..

Answer 31

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

Answer 32

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

Answer 33

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

Answer 34

-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

Answer 35

Myślę, że to nie działa, ponieważ to nie jest klasa FancyBox

Jose Basilio

Answer 36

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

Jak uruchomić jQuery Fancybox podczas ładowania strony?

Odpowiedzi: