Resize fancybox with dynamic content

问题

I'm using fancybox and when the box load I need to insert some items into a unordered list (ul) inside the box. The problem is that when I insert the items the content is larger than the box itself so I need to resize the box when the content has been updated. I can't get it to work with $.fancybox.resize(). How can I resize the box when the new content has been added?

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
}

The html and 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;
}

回答1:

I would use the fancybox provided ajax mechanism to load content. You are calling "onStart" which is an event called before the "ajax" event loads content.

Use the "ajax" handler to load content and call $.fancybox.resize() in the "onComplete" event handler.

I have also found that editing the fancybox source to use jquery's animate instead of the css direct makes the resizing transition smooth

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

回答2:

The link posted by Trufa says in one of the comments the fix for resizing issue was implemented in fancybox 1.3.4. So updating fancybox.js to the latest might solve the problem.

来源：https://stackoverflow.com/questions/4178750/resize-fancybox-with-dynamic-content

标签

jquery

fancybox