Bagaimana cara meluncurkan jQuery Fancybox saat memuat halaman?

Question 1

Saya ingin meluncurkan Fancybox (misalnya modal atau kotak lampu versi Fancybox ) saat halaman dimuat. Saya bisa mengikatnya ke tag jangkar tersembunyi dan mengaktifkan peristiwa klik dari tag jangkar itu melalui JavaScript, tetapi saya lebih suka meluncurkan Fancybox secara langsung dan menghindari tag jangkar tambahan.

Question 2

Fancybox saat ini tidak secara langsung mendukung cara peluncuran otomatis. Pekerjaan yang bisa saya lakukan adalah membuat tag jangkar tersembunyi dan memicu peristiwa kliknya. Pastikan panggilan Anda untuk memicu peristiwa klik disertakan setelah file jQuery dan Fancybox JS disertakan. Kode yang saya gunakan adalah sebagai berikut:

Contoh skrip ini disematkan langsung di HTML, tetapi bisa juga disertakan dalam file JS.

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

Question 3

Saya mendapatkan ini untuk bekerja dengan memanggil fungsi ini dalam dokumen siap:

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

Question 4

Itu mudah:

Jadikan elemen Anda tersembunyi terlebih dahulu seperti ini:

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

Kemudian panggil javascript Anda:

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

Lihat gambar di bawah ini:

masukkan deskripsi gambar di sini

Contoh lain:

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

masukkan deskripsi gambar di sini

Question 5

Window.load (sebagai lawan document.ready ()) tampaknya merupakan trik yang digunakan dalam demo onload JSFiddler dari Fancybox 2.0 :

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

Ingatlah bahwa Anda mungkin menggunakan document.ready () di tempat lain, dan IE9 akan kecewa dengan urutan pemuatan keduanya. Ini memberi Anda dua opsi: ubah semuanya ke window.load atau gunakan setTimer ().

Question 6

Atau gunakan ini di file JS setelah fancybox Anda diatur:

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

Saya percaya Fancybox 1.2.1 akan menggunakan opsi default jika tidak dari pengujian saya ketika saya perlu melakukan ini.

Question 7

mengapa ini belum menjadi salah satu jawabannya ?:

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

sekarang picu saja tautan Anda !!

mendapatkan ini dari beranda Fancybox

Question 8

Cara terbaik yang saya temukan adalah:

<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

Untuk kasus saya, berikut ini dapat berhasil. Saat halaman dimuat, lightbox segera muncul.

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

Jawaban Alex bagus. tetapi penting untuk dicatat bahwa itu memanggil gaya fancybox default. Jika Anda memiliki aturan khusus sendiri, Anda harus memanggil .trigger click pada jangkar khusus itu

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

Saya benar-benar berhasil memicu tautan fancyBox hanya dari file JS eksternal menggunakan acara "langsung":

Pertama, tambahkan acara klik langsung pada jangkar dinamis masa depan Anda:

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

Kemudian, tambahkan jangkar ke badan:

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

Kemudian picu fancyBox dengan "mengklik" jangkar:

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

Tautan fancyBox sekarang "hampir" siap. Mengapa "hampir"? Karena sepertinya Anda perlu menambahkan penundaan sebelum memicu klik kedua, jika tidak, skrip belum siap.

Ini adalah penundaan yang cepat dan kotor menggunakan beberapa animasi pada jangkar kami, tetapi berfungsi dengan baik:

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

Ini dia, fancyBox Anda akan muncul saat dimuat!

HTH

Question 12

Mungkin ini akan membantu ... ini digunakan dalam acara klik kalender jQuery ukuran penuh ( http://arshaw.com/fullcalendar/ ) ... tetapi dapat digunakan secara lebih umum untuk menangani fancybox yang diluncurkan oleh 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

Anda juga dapat menggunakan fungsi JavaScript asli setTimeout()untuk menunda tampilan kotak setelah DOM siap.

<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

Jika Anda tidak memiliki tombol untuk mengklik. Maksud saya jika ingin membukanya di respon ajax maka akan seperti ini:

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

Ini akan membantu..

Question 16

Anda dapat meletakkan link seperti ini (ini akan disembunyikan. Mungkin sebelum </body>)

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

Dan mengerjakan atribut rel atau kelas seperti ini

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

Lakukan saja dengan fungsi pemicu 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

mungkin Anda bisa menggunakan jqmodal , ringan dan mudah digunakan. Anda dapat menampilkan kotak modal dengan menelepon

$('.box').jqmShow()