调整带有动态内容的fancybox的大小 [英] Resize fancybox with dynamic content

问题描述

我正在使用fancybox，当盒子装满时，我需要将一些物品插入盒子内的无序列表(ul)中.问题是，当我插入项目时，内容大于盒子本身，因此当内容更新后，我需要调整盒子的大小.我无法使其与$ .fancybox.resize()一起使用.添加新内容后，如何调整框的大小?

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
}

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;
}

推荐答案

我将使用fancybox提供的ajax机制来加载内容.您正在调用"onStart"，它是在"ajax"事件加载内容之前调用的事件.

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.

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

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

我还发现，编辑fancybox源以使用jquery的动画而不是css direct可以使调整大小的过渡平滑

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

这篇关于调整带有动态内容的fancybox的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！