使用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加载内容

回答

相关问题