Настройка высоты fancybox 2.1.4 iframe динамически после завершения обработки содержимого

Question

У нас есть несколько графиков jQuery, которые загружаются в fancybox iframe. В последнее время некоторые из этих графиков слишком высоки для фрейма fancybox, а требование к дизайну состоит в том, что нет полосы прокрутки, если высота не превышает 700 пикселей. И не более 10 пикселей пробега выше и ниже графика.

Я попытался это:

afterLoad : function(){ 
    //(...) 
    $('.fancybox-inner').height($('.fancybox-iframe').contents().height() + 20); 
    console.log($('.fancybox-inner').height()); 
} 

console.log() правильно отображает desigred высоту.

Но fancybox по-прежнему отображается с высотой по умолчанию.

Устанавливая точку останова на линии console.log(), на странице отображается рамка fancybox в верхней части окна, отображаемая графа и iframe с правильной высотой. Когда я отпускаю остановку отладчика, fancybox перемещает кадр в центр окна просмотра, и он возвращается к высоте по умолчанию (такое же поведение, когда не в режиме отладки).

Как я могу сделать fancybox использовать желаемую высоту? Это зависит от графика, поэтому я не могу установить его в параметрах.

Answer 1

Работы с фреймами сделать вещи немного трудно, но вы можете попробовать что-то вроде

$(document).ready(function() { 
    $("a.fancybox").fancybox({ 
     type: "iframe", 
     fitToView: false, // we need this 
     autoSize: false, // and this 
     maxWidth: "95%", // and this too 
     beforeShow: function() { 
      // find the inner height of the iframe contents 
      var _newHeight = $(".fancybox-iframe").contents().find("html").innerHeight(); 
      this.height = _newHeight 
     } 
    }); // fancybox 
}); // ready 

Уведомления мы отключить fitToView и autoSize, чтобы иметь возможность установить предпочтительный height, однако мы также должны установить maxWidth чтобы избежать fancybox, выходящего за пределы экрана.

Также обратите внимание, что мы использовали обратный вызов beforeShow для установки this.height.