Изменение размера 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» для загрузки содержимого и вызовите $ .fancybox.resize () в обработчике события «onComplete».

Я также обнаружил, что редактирование источника fancybox для использования анимации jquery вместо 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

Answer 2

Ссылка, опубликованная Труфой, говорит, что в одном из комментариев исправление проблемы изменения размера было реализовано в fancybox 1.3.4.Так что обновление fancybox.js до последней версии может решить проблему.