จะเปิด jQuery Fancybox ในการโหลดหน้าได้อย่างไร?

Question 1

ฉันต้องการเปิดใช้งาน Fancybox (เช่นเวอร์ชันโมดอลหรือกล่องไฟของ Fancybox ) ในการโหลดหน้าเว็บ ฉันสามารถผูกมันกับแท็กจุดยึดที่ซ่อนอยู่และเริ่มการทำงานของเหตุการณ์การคลิกของแท็กจุดยึดนั้นผ่านทาง JavaScript แต่ฉันอยากจะเปิด Fancybox โดยตรงและหลีกเลี่ยงแท็กจุดยึดพิเศษ

Question 2

ขณะนี้ Fancybox ไม่สนับสนุนวิธีเปิดโดยอัตโนมัติโดยตรง วิธีแก้ปัญหาที่ฉันสามารถทำงานได้คือการสร้างแท็กจุดยึดที่ซ่อนอยู่และเรียกใช้เหตุการณ์การคลิก ตรวจสอบให้แน่ใจว่ามีการเรียกเพื่อเรียกเหตุการณ์การคลิกหลังจากรวมไฟล์ jQuery และ Fancybox JS แล้ว รหัสที่ฉันใช้มีดังนี้:

สคริปต์ตัวอย่างนี้ฝังอยู่ใน HTML โดยตรง แต่สามารถรวมไว้ในไฟล์ JS ได้ด้วย

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

Question 3

ฉันทำให้สิ่งนี้ทำงานได้โดยเรียกใช้ฟังก์ชันนี้ในเอกสารพร้อม:

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

Question 4

มันง่าย:

ทำให้องค์ประกอบของคุณถูกซ่อนไว้ก่อนดังนี้:

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

จากนั้นเรียกใช้จาวาสคริปต์ของคุณ:

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

ตรวจสอบภาพด้านล่าง:

ป้อนคำอธิบายภาพที่นี่

ตัวอย่างอื่น:

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

ป้อนคำอธิบายภาพที่นี่

Question 5

Window.load (ตรงข้ามกับ document.ready ()) ดูเหมือนจะเป็นเคล็ดลับที่ใช้ในการสาธิตการโหลด JSFiddler ของ Fancybox 2.0 :

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

โปรดทราบว่าคุณอาจใช้ document.ready () ที่อื่นและ IE9 ไม่พอใจกับลำดับการโหลดของทั้งสอง สิ่งนี้ทำให้คุณมีสองตัวเลือก: เปลี่ยนทุกอย่างเป็น window.load หรือใช้ setTimer ()

Question 6

หรือใช้สิ่งนี้ในไฟล์ JS หลังจากตั้งค่า fancybox ของคุณแล้ว:

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

ฉันเชื่อว่า Fancybox 1.2.1 จะใช้ตัวเลือกเริ่มต้นไม่เช่นนั้นจากการทดสอบของฉันเมื่อฉันต้องทำสิ่งนี้

Question 7

ทำไมคำตอบนี้ถึงยังไม่ได้:

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

ตอนนี้เพียงแค่เรียกลิงค์ของคุณ !!

ได้จากหน้าแรกของ Fancybox

Question 8

วิธีที่ดีที่สุดที่ฉันพบคือ:

<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

สำหรับกรณีของฉันสิ่งต่อไปนี้สามารถทำงานได้สำเร็จ เมื่อโหลดเพจแล้วไลท์บ็อกซ์จะป็อปอัพทันที

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

คำตอบของอเล็กซ์เยี่ยมมาก แต่สิ่งสำคัญคือต้องสังเกตว่าสิ่งนั้นเรียกใช้สไตล์ fancybox เริ่มต้น หากคุณมีกฎที่กำหนดเองคุณควรเรียก. ทริกเกอร์คลิกที่จุดยึดนั้น

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

จริงๆแล้วฉันสามารถทริกเกอร์ลิงก์ fancyBox จากไฟล์ JS ภายนอกโดยใช้เหตุการณ์ "สด" เท่านั้น:

ขั้นแรกเพิ่มเหตุการณ์การคลิกสดบนจุดยึดแบบไดนามิกในอนาคตของคุณ:

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

จากนั้นต่อจุดยึดเข้ากับร่างกาย:

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

จากนั้นทริกเกอร์ fancyBox โดย "คลิก" จุดยึด:

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

ขณะนี้ลิงก์ fancyBox "เกือบ" พร้อมแล้ว ทำไม "เกือบ"? เนื่องจากดูเหมือนว่าคุณต้องเพิ่มความล่าช้าก่อนที่จะเริ่มคลิกครั้งที่สองมิฉะนั้นสคริปต์จะไม่พร้อม

มันเป็นความล่าช้าที่รวดเร็วและสกปรกโดยใช้แอนิเมชั่นบางส่วนบนจุดยึดของเรา แต่ทำงานได้ดี:

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

จัดไปกล่องแฟนซีของคุณควรปรากฏขึ้น!

HTH

Question 12

บางทีนี่อาจช่วยได้ ... สิ่งนี้ถูกใช้ในกิจกรรมการคลิกปฏิทิน jQuery ขนาดเต็ม ( http://arshaw.com/fullcalendar/ ) ... แต่สามารถใช้โดยทั่วไปเพื่อจัดการกับ fancybox ที่เปิดตัวโดย 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

คุณยังสามารถใช้ฟังก์ชัน JavaScript ดั้งเดิมsetTimeout()เพื่อหน่วงเวลาการแสดงกล่องหลังจาก DOM พร้อมแล้ว

<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

ในกรณีที่คุณไม่มีปุ่มให้คลิก ฉันหมายความว่าถ้าคุณต้องการเปิดในการตอบสนองของ ajax มันจะเป็นเช่นนี้:

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

สิ่งนี้จะช่วย ..

Question 16

คุณสามารถใส่ลิงค์แบบนี้ (จะถูกซ่อนไว้ก่อนหน้านี้</body>)

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

และการทำงาน rel แอตทริบิวต์หรือคลาสเช่นนี้

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

เพียงแค่ทำด้วยฟังก์ชั่นทริกเกอร์ 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

บางทีคุณอาจใช้jqmodalน้ำหนักเบาและใช้งานง่าย คุณสามารถแสดงกล่องโมดอลโดยการโทร

$('.box').jqmShow()