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

Answer 1

95

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.

jquery jquery-plugins fancybox Blegger
sumber

Jika Anda mengunjungi situs web fancybox resmi ( fancybox.net ), mereka memiliki popup otomatis, sehingga Anda dapat memeriksa sumber halaman mereka untuk melihat bagaimana mereka melakukannya (petunjuk: tidak sama dengan jawaban yang diterima)

Nippysaurus

15

Untuk menghemat waktu bagi yang lain - $ (function () {$ .fancybox ('<div> Change me </div>', {padding: 20});});

nikib3ro

Answer 2

Jika Anda mengunjungi situs web fancybox resmi ( fancybox.net ), mereka memiliki popup otomatis, sehingga Anda dapat memeriksa sumber halaman mereka untuk melihat bagaimana mereka melakukannya (petunjuk: tidak sama dengan jawaban yang diterima)

Nippysaurus

Answer 3

15

Untuk menghemat waktu bagi yang lain - $ (function () {$ .fancybox ('<div> Change me </div>', {padding: 20});});

nikib3ro

Answer 4

162

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>

Blegger
sumber

1

hanya FYI yang $ (document) .ready (function () {$ ("# hidden_link"). fancybox (). trigger ('click');}); sama dengan: function LaunchFancyBox () {$ ("# hidden_link"). fancybox (). trigger ('click'); } $ (document) .ready (LaunchFancyBox ());

Mark Schultheiss

4

Apakah sama seperti $(document).ready(LaunchFancyBox());seharusnya $(document).ready(LaunchFancyBox);. (perhatikan kurangnya panggilan fungsi di akhir).

Adam Luter

Saya memang mencoba ini, tetapi tidak berhasil. Saya harus memuat konten melalui Ajax lalu saya menelepon $ .fancybox ({... meneruskan konten.

giubueno

@Blegger Solusi Anda $ ("# hidden_link"). Fancybox (). Trigger ('click'); bekerja sempurna untuk saya.

Mukesh

Answer 5

1

hanya FYI yang $ (document) .ready (function () {$ ("# hidden_link"). fancybox (). trigger ('click');}); sama dengan: function LaunchFancyBox () {$ ("# hidden_link"). fancybox (). trigger ('click'); } $ (document) .ready (LaunchFancyBox ());

Mark Schultheiss

Answer 6

4

Apakah sama seperti $(document).ready(LaunchFancyBox());seharusnya $(document).ready(LaunchFancyBox);. (perhatikan kurangnya panggilan fungsi di akhir).

Adam Luter

Answer 7

Saya memang mencoba ini, tetapi tidak berhasil. Saya harus memuat konten melalui Ajax lalu saya menelepon $ .fancybox ({... meneruskan konten.

giubueno

Answer 8

@Blegger Solusi Anda $ ("# hidden_link"). Fancybox (). Trigger ('click'); bekerja sempurna untuk saya.

Mukesh

Answer 9

66

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

JordanC
sumber

Ini tidak berhasil untuk saya karena ada yang tidak beres dengan penanganan parameter href. Animasi "tunggu" muncul selamanya.

Boris van Schooten

3

Perlu dicatat bahwa ini tampaknya menjadi metode yang dikembangkan oleh pengembang fancybox itu sendiri. Jika Anda menuju ke situs web fancybox ( fancybox.net ), Anda akan melihat dialog modal yang memberitahu Anda bahwa "fancybox2 dilepaskan!" ... jika Anda melihat sumber halaman itu, Anda dapat melihat bahwa mereka telah menggunakan teknik yang dijelaskan dalam jawaban ini.

Nippysaurus

Ini harus menjadi jawaban yang diterima! Solusi yang diterima berfungsi, tetapi menambahkan jangkar tersembunyi di mana Anda memicu peristiwa klik bukanlah yang paling bersih, bukan?

luigi7up

Setuju, menggunakan tautan tersembunyi adalah sebuah retasan. Lakukan dengan benar.

Jamsi

Sangat sederhana! Terima kasih! Saya memiliki penyematan youtube autoplay di dalamnya. Apakah ada cara untuk menutup de lightbox segera setelah video selesai?

Antonio Almeida

Answer 10

Ini tidak berhasil untuk saya karena ada yang tidak beres dengan penanganan parameter href. Animasi "tunggu" muncul selamanya.

Boris van Schooten

Answer 11

3

Perlu dicatat bahwa ini tampaknya menjadi metode yang dikembangkan oleh pengembang fancybox itu sendiri. Jika Anda menuju ke situs web fancybox ( fancybox.net ), Anda akan melihat dialog modal yang memberitahu Anda bahwa "fancybox2 dilepaskan!" ... jika Anda melihat sumber halaman itu, Anda dapat melihat bahwa mereka telah menggunakan teknik yang dijelaskan dalam jawaban ini.

Nippysaurus

Answer 12

Ini harus menjadi jawaban yang diterima! Solusi yang diterima berfungsi, tetapi menambahkan jangkar tersembunyi di mana Anda memicu peristiwa klik bukanlah yang paling bersih, bukan?

luigi7up

Answer 13

Setuju, menggunakan tautan tersembunyi adalah sebuah retasan. Lakukan dengan benar.

Jamsi

Answer 14

Sangat sederhana! Terima kasih! Saya memiliki penyematan youtube autoplay di dalamnya. Apakah ada cara untuk menutup de lightbox segera setelah video selesai?

Antonio Almeida

Answer 15

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

Answer 16

10

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

Chris S
sumber

Jawaban ini berfungsi lebih baik untuk saya ketika saya ingin halaman dimulai dengan peringatan seperti ios dan kemudian dapat menutupnya. Jawaban paling populer ketika saya mencoba menerapkannya membuatnya begitu setiap kali saya mengklik fancybox. Menutup elemen akan memuat ulang alih-alih pergi. Terima kasih!

Nathaniel Flick

Jawaban Anda Pak paling relevan dan 100% benar. Terima kasih.

Schalk Keun

Answer 17

Jawaban ini berfungsi lebih baik untuk saya ketika saya ingin halaman dimulai dengan peringatan seperti ios dan kemudian dapat menutupnya. Jawaban paling populer ketika saya mencoba menerapkannya membuatnya begitu setiap kali saya mengklik fancybox. Menutup elemen akan memuat ulang alih-alih pergi. Terima kasih!

Nathaniel Flick

Answer 18

Jawaban Anda Pak paling relevan dan 100% benar. Terima kasih.

Schalk Keun

Answer 19

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.

Answer 20

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

Answer 21

5

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>

arena-ru
sumber

Ini akan gagal karena tanda kurung tutup dari opsi diberi komentar.

Teekin

¡Bersih dan mudah! Bekerja dengan sempurna. Terima kasih!

Carolina

Answer 22

Ini akan gagal karena tanda kurung tutup dari opsi diberi komentar.

Teekin

Answer 23

¡Bersih dan mudah! Bekerja dengan sempurna. Terima kasih!

Carolina

Answer 24

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>

Answer 25

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

Answer 26

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

Answer 27

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

Answer 28

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>

Answer 29

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

Answer 30

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

Ini akan membantu..

Answer 31

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

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
sumber

1

Meskipun kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang bagaimana dan / atau mengapa kode ini memecahkan masalah akan meningkatkan nilai jawaban jangka panjang.

Nic3500

Answer 33

1

Meskipun kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang bagaimana dan / atau mengapa kode ini memecahkan masalah akan meningkatkan nilai jawaban jangka panjang.

Nic3500

Answer 34

-1

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

$('.box').jqmShow()

limboy
sumber

Saya rasa ini tidak berhasil karena itu bukan kelas FancyBox

Jose Basilio

1

Desainer saya menginginkan tampilan dan nuansa Fancybox, dan saya lebih suka tidak berusaha menerapkannya untuk jqmodal. Selain itu, kami sudah menggunakan Fancybox di situs ini dan saya tidak ingin mendukung dua impmentasi kotak cahaya yang berbeda.

Blegger

Answer 35

Saya rasa ini tidak berhasil karena itu bukan kelas FancyBox

Jose Basilio

Answer 36

1

Desainer saya menginginkan tampilan dan nuansa Fancybox, dan saya lebih suka tidak berusaha menerapkannya untuk jqmodal. Selain itu, kami sudah menggunakan Fancybox di situs ini dan saya tidak ingin mendukung dua impmentasi kotak cahaya yang berbeda.

Blegger

Bagaimana cara meluncurkan jQuery Fancybox saat memuat halaman?

Jawaban: