2013-01-14 23 views
6

Po pewnym czasie nadal mam problemy z rozmiarem wysokości iframe w FancyBox2. Wołam w moim rodzicem:Fancybox iframe dynamicznie zmienia rozmiar

$(document).ready(function() { 
    $('.fancybox').fancybox();  
    $('.showframe').fancybox({ 
     openEffect : 'elastic', 
     closeEffect : 'elastic', 
     beforeShow: function(){ 
      this.width = ($('.fancybox-iframe').contents().find('body').width()); 
      this.height = ($('.fancybox-iframe').contents().find('body').height()); 
     }, 
     afterClose : function() { 
      location.reload(); 
      return; 
     }, 
     onUpdate : { autoHeight: true}, 
     helpers : { 
      overlay : {closeClick: false} 
     } 
    }); 
}); 

I to działa prawidłowo, gdy iframe jest otwarty, ale w iframe Mam skrypt, który pozwala użytkownikom na przesyłanie obrazów i wyświetlić podgląd przesłanych zdjęć, więc wysokość iframe się zmienia (w zależności od liczby przesłanych zdjęć), ale FancyBox nie "zmieni rozmiaru wysokości". Używam tego w moim „dzieckiem” iframe wywołać Resize:

...some functions here that handle image upload and image display... 
parent.$.fancybox.scrollBox(); 

Teraz to działa tylko w Firefox podczas Chrome i IE pokaże przewijania barów zamiast rozmiaru wysokość iframe. Czy istnieje sposób na dostosowanie tej przeglądarki do różnych przeglądarek?

EDIT: Mam ten kod do pracy we wszystkich przeglądarkach:

parent.$('.fancybox-inner').height($('#wrap').height()+20); 

ale problemem jest to, że nie będzie iframe centrum (będzie to tylko zmiana rozmiaru wysokości, ale nie będzie wycentrować na ekranie). Próbowałem już parent.$.fancybox.center(); i parent.$.fancybox.reize(); i parent.$.fancybox.update(); i co nie, ale to działa tylko w Firefoksie.

Znalazłem (od czystego szczęścia), że to faktycznie działa we wszystkich przeglądarkach (nawet IE8):

parent.$('.fancybox-inner').height($('#wrap').height()+30); 
parent.$.fancybox.reposition(); 
+0

try (wewnątrz strony dziecka) wywołanie metody 'rodzica $ fancybox.update()' po wielkości uległy zmianie. Ponadto format 'onUpdate' powinien mieć postać' onUpdate: function() {...} '; spróbuj ustawić to w środku: 'this.height = $ ('. fancybox-iframe'). contents(). find ('body'). innerHeight();' – JFK

Odpowiedz

2

Cieszę się znaleźć odpowiedź, i dzięki za to. tylko podpowiedź - dla Fancybox 1.3.4 użytkowników to

parent.$.fancybox.center(); 

Jeśli chcesz także wyregulować szerokość trzeba zmienić rozmiar więcej DIV. Moje pełne Resize wygląda następująco:..

// get iframe height and width 
var current_height = document.getElementById('popup').offsetHeight; 
var current_width = document.getElementById('popup').offsetWidth; 

// resize height 
parent.$('.fancybox-inner').height(current_height + 30); 

// resize width 
parent.$('#fancybox-outer').width(current_width + 30); 
parent.$('#fancybox-wrap').width(current_width + 30); 
parent.$('#fancybox-content').width(current_width + 30); 
parent.$('.fancybox-inner').width(current_width + 30); 

// center the thing - vertically and horizontally 
parent.$.fancybox.center(); 
parent.$.fancybox.resize(); 

Testowany IE8 +, Firefox, Chrome