Как вы изменяете размер Fancybox во время выполнения?

Question

Кто-нибудь знает, как изменить размер jQuery Fancybox во время выполнения?

При инициализации fancybox я могу сделать это:

$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });

Я заполняю fancybox динамическим контентом и хочу изменить его размер в соответствии с контентом.

Answer 1

Я тоже боролся с изменением размера fancybox. Решение $.fancybox.reposition();

Работает как шарм!

Answer 2

.

$ fancybox.resize (); у меня не сработало, поэтому я поместил этот код в загруженную страницу внутри fancybox iframe:

$(document).ready(function(){
    parent.$("#fancybox-content").height($(document).height());
});

Вы также можете установить его в обратном вызове:

$("#mydiv").toggle('fast', function(){
    parent.$("#fancybox-content").height($(document).height());
});

Answer 3

В моем случае я использую Fancybox для отображения очень простой веб-страницы, которая просто содержит изображение. Это изображение может отличаться по размеру. Моя проблема заключалась в том, что изображение не включало style="height: NNpx; width: NNpx;". Без этого fancybox autoSize может дать неожиданные результаты (указанные в их документах http://fancyapps.com/fancybox/).

tl; dr: предоставить атрибуты ширины и высоты для правильной работы autoSize.

Answer 4

Спасибо всем, кто вносит свой вклад в StackOverflow.com. Вы все были спасителями для меня много раз. Теперь я наконец-то могу внести свой вклад. Ниже приведен пример того, как мне удалось преодолеть фантазию изменения размера во время выполнения запроса:

Я назначил специфичные для элемента href атрибуты с передаваемыми ему переменными PHP. Затем вызывается и задается атрибут в событии click, с функцией управления fancybox и параметрами, встроенными в ...

<a href="ASSET_ABSOLUTE PATH" class="asset" data-fancybox-type="iframe" assetW="$assetW" 
assetH="$assetH">LINK</a>

$(".asset").click(function(){

    var assetW = $(this).attr('assetW');

    //to display inter-activities..
    $(".asset").fancybox({

    width       : assetW,
    fitToView   : false,
    autoSize    : true,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
       'onComplete' : function(){
         $.fancybox.resize();

      }
  });
});

Answer 5

Я только что опубликовал предложенный патч для Fancybox в его группе Google https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8, в котором добавлен открытый метод $ .fancybox.reshow (). Это пересчитает высоту и ширину фантазии. Он работает как с window.onorientationchange, так и с window.onresize, например:

window.onresize = function() {
    $.fancybox.reshow();
}

Answer 6

Использование:

parent.jQuery.fancybox.update();

Answer 7

Вкл. Fancybox 3 (новейшая версия)

parent.jQuery.fancybox.getInstance().update();

Ссылка: http://fancyapps.com/fancybox/3/docs/#iframe

Answer 8

Это решение от моего:

$("#linkpopup").fancybox({
    'titlePosition'     : 'inside',
    'transitionIn'      : 'none',
    'transitionOut'     : 'elastic',
    'onComplete' : function(){
        $.fancybox.resize();
    }
});