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

Question

我正在使用 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;
}

Answer 1

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

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

我还发现编辑 fancybox 源代码以使用 jquery 的 animate 而不是直接使用 css 可以使调整大小过渡平滑

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