使用动态内容调整fancybox的大小

时间:2010-11-14 17:43:47

标签: jquery fancybox

我正在使用fancybox,当盒子加载时,我需要将一些项目插入到框内的无序列表(ul)中。问题是,当我插入项目时,内容大于框本身,所以我需要在内容更新后调整框的大小。我无法使用$ .fancybox.resize()。如何在添加新内容时调整框的大小?

jQuery的:

$("a#OpenPopup").fancybox({ 'onStart': function () { loadContent(); } });

function loadContent(type) {
    var items = "<li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li>"; //This items I load with an ajax call
    $("#Popup u").html(items);
    $.fancybox.resize(); //This doesn't resize
}

html和css:

<a href="#Popup" id="OpenPopup">
<div style="display:none">
    <div id="Popup">
        <h1>Content</h1>
        <ul></ul>
    </div>
</div>

#Popup
{
    text-align: left;
    width: 400px;
}

2 个答案:

答案 0 :(得分:1)

我会使用fancybox提供的ajax机制来加载内容。您正在调用“onStart”,这是在“ajax”事件加载内容之前调用的事件。

使用“ajax”处理程序加载内容并在“onComplete”事件处理程序中调用$ .fancybox.resize()。

我还发现编辑fancybox源代码使用jquery的animate代替css direct会使调整大小过渡变得平滑

        //wrap.css({height: h + (currentOpts.padding * 2) + titleh});
    //inner.css({height:    h});

    wrap.animate({
        height: h + (currentOpts.padding * 2) + titleh
    }, 100);

    inner.animate({
        height: h
    }, 100);

http://fancybox.net/api

答案 1 :(得分:0)

Trufa发布的链接在其中一条评论中说,调整大小问题的修复程序是在fancybox 1.3.4中实现的。因此,将fancybox.js更新为最新版本可能会解决问题。