使用AJAX和Fancybox 1.3加載內容

全部，我試圖加載一些內容到一個fancybox。我想使用AJAX加載一些頁面內容。我如何使用AJAX和1.3版將這些內容加載到我的fancybox中？使用AJAX和Fancybox 1.3加載內容

謝謝！

2012-03-23 user1048676

你正在使用哪個版本的fancybox？ – 2012-03-23 16:50:51

@SimonEdström1.3.4 – user1048676 2012-03-23 16:51:59

要通過單擊鏈接而加載的AJAX內容納入的fancybox，你可以用下面的方法，直接從的fancybox例子取（http://fancybox.net/howto）：

<a class="various" href="/demo/ajax.php">Ajax</a> 

$(document).ready(function() { 
    $(".various").fancybox(); 
});

注意這個完美的作品，但如果你想指定其他您可以執行以下步驟的參數：

$(document).ready(function() { 
    $(".various").fancybox({ 
     hideOnOverlayClick:false, 
     hideOnContentClick:false, 
     ...., 
    }); 
});

其他參數請參考fancybox文檔。

您始終可以使用href選項（http://fancybox.net/api）在JavaScript中指定href。

更新：我看到你正在使用1.3.4，因此鏈接已經相應更新。

UPDATE：如果你要更新到的fancybox 2，你可以使用來自的fancybox網站下面的例子（http://fancyapps.com/fancybox/#examples）：

<a class="various fancybox.ajax" href="/demo/ajax.php">Ajax</a> 

$(document).ready(function() { 
    $(".various").fancybox({ 
     maxWidth : 800, 
     maxHeight : 600, 
     fitToView : false, 
     width  : '70%', 
     height  : '70%', 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none' 
    }); 
});

來源

2012-03-23 16:52:19

是您使用2.0的例子嗎？如果是這樣，我可以升級到那個，因爲那個例子很完美。 – user1048676 2012-03-23 17:06:22

我最初的例子是使用FancyBox 2，它可以在這裏找到：http://fancyapps.com/fancybox/#examples – 2012-03-23 17:16:11

謝謝我已經升級這個，它加載它，我想如何，除了黑色覆蓋層實際上是在頂部頁面內容。爲什麼會這樣？如果我使用它顯示圖片，它會將圖片加載到疊加層上。 – user1048676 2012-03-23 17:27:13

從http://fancybox.net/其中只使用採取1.3

$("#Link").fancybox({ 
    ajax : { 
     type : "POST", 
     data : 'mydata=test' 
    } 
});

來源

2012-03-23 16:53:40

function test_function(){ 

    $.fancybox({ 
     'scrolling'   : 'no', 
     'padding'   : 0, 
     'centerOnScroll' : true, 
     'href'    : 'faq.php', 
     'type'    : 'ajax' 
    }); 
}

來源

2014-01-09 10:05:11 gige

使用AJAX和Fancybox 1.3加載內容

回答

相關問題