Блог

На моем сайте я открываю fancybox, содержащий содержимое IFRAME. Возможно ли обновить размер fancybox при нажатии на ссылку внутри него?

Например, изначально я установил для него ширину 535 пикселей, при нажатии на определенную ссылку я бы хотел, чтобы размер fancybox был изменен до ширины 900 пикселей.

Есть идеи, как я могу этого добиться?

Спасибо!

Я думаю, что у меня просто такая же проблема, и в моем случае fancybox.resize не сработал, но это сработало для меня:

 $("#lightbox").fancybox({
  'hideOnContentClick' : true,
  'width' : 500,
  'type' : 'iframe',
  'padding' : 35,
  'onComplete' : function() {
    $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
      $('#fancybox-content').height($(this).contents().find('body').height() 30);
    });
  }
});  

Заслуга Иэна Хоара в публикации этого здесь:
http://www.ianhoar.com/2011/08/25/jquery-and-fancybox-how-to-automatically-set-the-height-of-an-iframe-lightbox/

Для тех, кто мог бы прийти сюда, используя Fancybox 2:

Это код, который сработал у меня

 $(".iframe").fancybox({
                    autoSize: false,
                    autoDimensions: false,
                    width: 630,
                    height: 425,
                    fitToView: false,
                    padding: 0,
                    title: this.title,
                    href: $(this).attr('href'),
                    type: 'iframe'
                });
  

 $('a', $('#youriframeID').contentDocument).bind('click', function() {
    preventDefault();
    $('#yourIframeID').attr('src', $(this).attr('href'));
    $('#yourIframeID').load(function() {
        $.fancybox.resize;
    });
});
  

Если в вашем iframe щелкнуть на ‘a’, события по умолчанию будут заблокированы. Вместо этого мы изменим src вашего iframe. После загрузки #.fancybox.resize автоматически изменит размер fancybox в соответствии с содержимым. Это идея, поэтому код, вероятно, пока не будет работать. Просто чтобы помочь вам встать на правильный путь.

Fancybox 3.3.1 автоматически изменяет размер окна при перезагрузке содержимого iFrame. Параметр «предварительная загрузка», и по умолчанию он равен true.

Видишь https://fancyapps.com/fancybox/3/docs/#iframe .

Я протестировал это, и это работает, но я по-прежнему получаю очень короткую полосу прокрутки в последних версиях Chrome и FF. Функция update(), похоже, неправильно вычисляет высоту. Похоже на ошибку, и я разместил ее в репозитории fancybox на Github. К сожалению, репозиторий закрыт уже год.

Это работает у меня на fancyBox версии v2.1.4

 $('#myid').fancybox({
    closeBtn    : false,
    padding     : 0,
    preload     : true,
    onUpdate    : function(){
        $.fancybox.update();
    }
});