2013-01-14 23 views
6

Bir süre sonra hala FancyBox2'de iframe yüksekliği yeniden boyutlandırmayla ilgili sorunlar yaşıyorum.Fancybox iframe dinamik olarak yeniden boyutlandırılıyor

$(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} 
     } 
    }); 
}); 

Ve iframe açıldığında düzgün çalışır, ancak iframe'de Kullanıcıların resim yüklemek ve yüklenen resimlerin önizlemesini görüntüleme olanağı sağlayan bir komut dosyası var, yani: benim üst bu arıyorum iframe'in yüksekliği (yüklenen fotoğraf sayısına bağlı olarak değişir), ancak FancyBox "yüksekliği yeniden boyutlandırmaz". Chrome ve IE iframe yüksekliğini yeniden boyutlandırma yerine kaydırma çubukları gösterecektir ise

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

Şimdi bu sadece Firefox'ta çalışır: Ben yeniden boyutlandırma tetiklemek için benim "çocuk" iframe'de bu kullanıyorum. Bu çapraz tarayıcıyı uyumlu hale getirmenin bir yolu var mı?

DÜZENLEME:

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

ama sorun değil merkezi (sadece yüksekliği yeniden boyutlandırmak olacak edeceği iframe'dir, ancak ekranda yeniden merkeze olmaz: Bu kod tüm tarayıcılarda işe). Ben parent.$.fancybox.center(); ve parent.$.fancybox.reize(); ve parent.$.fancybox.update(); denedim ve değil, ama sadece Firefox'ta çalışır.

ben bu aslında tüm tarayıcılar (hatta IE8) çalıştığını (saf şans) tespit ettik:

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

deneyin yöntemi 'ebeveyn çağırarak $ fancybox.update()' boyutu sonra değişti. Ayrıca, "onUpdate" biçimi onUpdate: function() {...} 'olmalıdır; bunun içini ayarlamaya çalışın: 'this.height = $ ('. fancybox-iframe') içeriği() bulmak ('body'). innerHeight();' – JFK

cevap

2

sevindim cevap buldum ve bunun için teşekkürler. Sadece bir ipucu - ayrıca daha fazla div'leri yeniden boyutlandırmak için var genişliğini yeniden ayarlamak istiyorsanız Fancybox 1.3.4 kullanıcıları için bu

parent.$.fancybox.center(); 

bu. Benim tam boyutlandırma şöyle görünür:..

// 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(); 

Test IE8 +, (çocuk sayfası içinde) Firefox, Chrome

İlgili konular