使用AJAX和Fancybox 1.3加载内容

Question

所有,我正在尝试将一些内容加载到fancybox中.我想用AJAX加载一些页面内容.如何使用AJAX和1.3版将此内容加载到我的fancybox中？

谢谢!

Answer 1

要通过单击链接将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使用href选项(http://fancybox.net/api)在JavaScript中指定.

更新:我看到你正在使用1.3.4,因此链接已相应更新.

更新:如果您要更新到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'
    });
});