Làm cách nào để khởi chạy jQuery Fancybox khi tải trang?

95

Tôi muốn khởi chạy một Fancybox (ví dụ: phiên bản hộp đèn hoặc phương thức của Fancybox ) khi tải trang. Tôi có thể liên kết nó với một thẻ liên kết ẩn và kích hoạt sự kiện nhấp chuột của thẻ liên kết đó thông qua JavaScript, nhưng tôi chỉ muốn khởi chạy trực tiếp Fancybox và tránh thêm thẻ liên kết.

jquery jquery-plugins fancybox

— Máy xay sinh tố
nguồn

Nếu bạn đi đến trang web Fancybox chính thức ( fancybox.net ) họ có một tự động bật lên, vì vậy bạn có thể kiểm tra mã nguồn trang web của họ để xem cách họ đã làm điều đó (gợi ý: không giống như câu trả lời được chấp nhận)

— Nippysaurus

15

Để tiết kiệm thời gian cho những người khác - $ (function () {$ .fancybox ('<div> Thay đổi tôi </div>', {padding: 20});});

— nikib3ro

162

Fancybox hiện không hỗ trợ trực tiếp cách tự động khởi chạy. Công việc xung quanh tôi có thể bắt đầu làm việc là tạo một thẻ neo ẩn và kích hoạt sự kiện nhấp chuột của nó. Đảm bảo cuộc gọi của bạn để kích hoạt sự kiện nhấp chuột được bao gồm sau khi các tệp jQuery và Fancybox JS được bao gồm. Mã tôi đã sử dụng như sau:

Tập lệnh mẫu này được nhúng trực tiếp vào HTML, nhưng nó cũng có thể được đưa vào tệp JS.

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

— Máy xay sinh tố
nguồn

1

chỉ là một FYI $ (document) .ready (function () {$ ("# hidden_link"). favouritebox (). trigger ('click');}); giống như: function LaunchFancyBox () {$ ("# hidden_link"). favouritebox (). trigger ('click'); } $ (tài liệu) .ready (LaunchFancyBox ());

— Mark Schultheiss

4

Cũng giống như $(document).ready(LaunchFancyBox());nên được $(document).ready(LaunchFancyBox);. (lưu ý thiếu lệnh gọi hàm ở cuối).

— Adam Luter

Tôi đã thử điều này, nhưng không thành công. Tôi phải tải nội dung qua Ajax sau đó tôi gọi $ .fancybox ({... chuyển nội dung.

— giubueno

@Blegger Giải pháp của bạn $ ("# hidden_link"). Favouritebox (). Trigger ('click'); hoạt động hoàn hảo cho tôi.

— Mukesh

66

Tôi đã làm việc này bằng cách gọi hàm này trong tài liệu đã sẵn sàng:

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

— JordanC
nguồn

Điều này không hiệu quả với tôi vì đã xảy ra sự cố với việc xử lý tham số href. Hoạt ảnh "đợi" hiển thị mãi mãi.

— Boris van Schooten,

3

Điều đáng chú ý là đây dường như là phương pháp mà chính các nhà phát triển ưa thích. Nếu bạn truy cập vào trang web ưa thích ( ưa thích. ... nếu bạn nhìn vào nguồn của trang đó, bạn có thể thấy rằng họ đã sử dụng kỹ thuật được mô tả trong câu trả lời này.

— Nippysaurus

Đây phải là câu trả lời được chấp nhận! Giải pháp được chấp nhận đang hoạt động, nhưng việc thêm một neo ẩn mà bạn kích hoạt sự kiện nhấp chuột không thực sự là giải pháp rõ ràng nhất, phải không?

— luigi7up

Đồng ý, sử dụng một liên kết ẩn là một hack. Làm đúng.

— Jamsi

Rất đơn giản! Cảm ơn! Tôi có nhúng youtube tự động phát trong đó. Có cách nào để đóng hộp đèn de ngay khi video kết thúc không?

— Antonio Almeida

12

Đơn giản của nó:

Trước tiên, hãy ẩn phần tử của bạn như thế này:

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

Sau đó, gọi javascript của bạn:

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

Kiểm tra hình ảnh dưới đây:

nhập mô tả hình ảnh ở đây

Một vi dụ khac:

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

nhập mô tả hình ảnh ở đây

— Hisham Muneer
nguồn

10

Window.load (trái ngược với document.ready ()) dường như là thủ thuật được sử dụng trong các bản demo onload JSFiddler của Fancybox 2.0 :

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

Hãy nhớ rằng bạn có thể đang sử dụng document.ready () ở nơi khác và IE9 khó chịu với thứ tự tải của cả hai. Điều này khiến bạn có hai tùy chọn: thay đổi mọi thứ thành window.load hoặc sử dụng setTimer ().

— Chris S
nguồn

Câu trả lời này phù hợp hơn với tôi khi tôi muốn một trang bắt đầu với cảnh báo giống như ios bật lên và sau đó có thể đóng nó. Câu trả lời phổ biến nhất khi tôi cố gắng triển khai nó khiến nó bất cứ khi nào tôi nhấp vào favourite.close, phần tử sẽ tải lại thay vì biến mất. Cảm ơn!

— Nathaniel Flick

Câu trả lời của bạn thưa ông là phù hợp nhất và đúng 100%. Cảm ơn.

— Schalk Keun

8

Hoặc sử dụng điều này trong tệp JS sau khi hộp thư thích hợp của bạn được thiết lập:

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

Tôi tin rằng Fancybox 1.2.1 sẽ sử dụng các tùy chọn mặc định khác với thử nghiệm của tôi khi tôi cần thực hiện việc này.

— cynge13
nguồn

5

tại sao đây vẫn chưa phải là một trong những câu trả lời ?:

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

bây giờ chỉ cần kích hoạt liên kết của bạn !!

lấy cái này từ trang chủ Fancybox

— Thomas
nguồn

5

Cách tốt nhất tôi đã tìm thấy là:

<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
nguồn

Điều này sẽ không thành công vì dấu ngoặc đóng của các tùy chọn được nhận xét.

— Teekin

¡Sạch sẽ và dễ dàng! Hoạt động hoàn hảo. Cảm ơn!

— Carolina

4

Đối với trường hợp của tôi, cách sau có thể hoạt động thành công. Khi trang được tải, hộp đèn sẽ bật lên ngay lập tức.

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>

— CMen
nguồn

3

Câu trả lời của Alex rất tuyệt. nhưng điều quan trọng cần lưu ý là điều đó gọi kiểu hộp thư mặc định. Nếu bạn có quy tắc tùy chỉnh của riêng mình, bạn chỉ nên gọi .trigger nhấp vào neo cụ thể đó

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

— Andrew Scott Kimrey
nguồn

2

Tôi thực sự quản lý để kích hoạt một liên kết ưa thích chỉ từ một tệp JS bên ngoài bằng cách sử dụng sự kiện "trực tiếp":

Trước tiên, hãy thêm sự kiện nhấp chuột trực tiếp vào liên kết động trong tương lai của bạn:

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

Sau đó, nối neo vào phần nội dung:

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

Sau đó, kích hoạt ưa thíchBox bằng cách "nhấp vào" neo:

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

Liên kết ưa thích hiện đã "gần như sẵn sàng". Tại sao "gần như"? Bởi vì có vẻ như bạn cần thêm một số thời gian trễ trước khi kích hoạt lần nhấp thứ hai, nếu không, tập lệnh chưa sẵn sàng.

Đó là một sự chậm trễ nhanh chóng và bẩn thỉu khi sử dụng một số hoạt ảnh trên neo của chúng tôi nhưng nó hoạt động tốt:

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

Của bạn đây, hộp thư mục của bạn sẽ xuất hiện trên tải!

HTH

— Viên con nhộng
nguồn

1

Có thể điều này sẽ hữu ích ... điều này đã được sử dụng trong sự kiện nhấp vào lịch jQuery kích thước đầy đủ ( http://arshaw.com/fullcalendar/ ) ... nhưng nó có thể được sử dụng phổ biến hơn để đối phó với hộp thư thích hợp đang được jQuery khởi chạy.

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

— Leigh
nguồn

1

Bạn cũng có thể sử dụng hàm JavaScript gốc setTimeout()để trì hoãn việc hiển thị hộp sau khi DOM đã sẵn sàng.

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

— John Kary
nguồn

1

Trong trường hợp nếu bạn không có nút để nhấp. Ý tôi là nếu bạn muốn mở nó trên phản hồi ajax thì nó sẽ như thế này:

$.fancybox({
      href: '#ID',
      padding   : 23,
      maxWidth  : 690,
      maxHeight : 345
});

— Maha Dev
nguồn

1

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

Điều này sẽ giúp..

— Prabhagaran
nguồn

0

Bạn có thể đặt liên kết như thế này (nó sẽ bị ẩn. Có thể là trước đó </body>)

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

Và thuộc tính hoặc lớp rel làm việc như thế này

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

Chỉ cần làm điều đó với hàm kích hoạt jquery

$( window ).load(function() {
  $("#clickbanner").trigger('click');
});

— nixis
nguồn

0

HTML:

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

JS:

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

— AnasSafi
nguồn

1

Mặc dù mã này có thể trả lời câu hỏi, nhưng việc cung cấp thêm ngữ cảnh về cách và / hoặc lý do tại sao nó giải quyết vấn đề sẽ cải thiện giá trị lâu dài của câu trả lời.

— Nic3500

-1

có lẽ bạn có thể sử dụng jqmodal , nó nhẹ và dễ sử dụng. bạn có thể hiển thị hộp phương thức bằng cách gọi

$('.box').jqmShow()

— limboy
nguồn

Tôi không nghĩ rằng tác phẩm này bởi vì đó không phải là lớp của Fancybox

— Jose Basilio

1

Các nhà thiết kế của tôi muốn giao diện của Fancybox và tôi không muốn bỏ công sức cố gắng triển khai nó cho jqmodal. Thêm vào đó, chúng tôi đã sử dụng Fancybox trên trang web và tôi không muốn hỗ trợ hai hàm ý hộp đèn khác nhau.

— Blegger