开发者

Resize fancybox with dynamic content

开发者 https://www.devze.com 2023-01-24 20:25 出处:网络
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 s

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").fancyb开发者_如何学Pythonox({ '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;
}


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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号