2013-01-14 2 views
6

FancyBox2에서 iframe의 크기를 조정하는 데 문제가 있습니다.Fancybox iframe 동적으로 크기 조정

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

을 그리고 그것은 iframe을 열 때 제대로 작동하지만 iframe에 나는 사용자가 이미지를 업로드하고 업로드 된 이미지의 미리보기를 표시 할 수있는 스크립트를 가지고, 그래서 : 나는 부모님이 전화하고 iframe의 높이가 변경됩니다 (업로드 된 사진 수에 따라 다름). 그러나 FancyBox는 "높이의 크기를 조정하지 않습니다". 크롬과 IE는 iframe이 높이의 크기를 조정하는 대신 스크롤 막대가 표시됩니다 동안

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

지금 이것은 단지 파이어 폭스에서 작동 : 나는 크기 조절을 트리거 내 "아이"iframe에이 사용하고 있습니다. 이 크로스 브라우저를 호환 가능하게 만드는 방법이 있습니까?

편집 :

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

하지만 문제는되지 센터 (그냥 높이의 크기를 조정 할 것 iframe을하지만, 화면의 중심을 다시하지 않을 것이다 :이 코드는 모든 브라우저에서 작동하도록). 내가 parent.$.fancybox.center();parent.$.fancybox.reize();parent.$.fancybox.update();을 시도했지만 무엇을 제외하고는 Firefox에서만 작동합니다.

나는 이것이 실제로 모든 브라우저 (심지어 IE8)에서 작동 (순수 행운에 의해) 발견했습니다

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

시도하는 방법'부모를 호출 $ fancybox.update()가'크기 후 변경되었습니다. 또한, onUpdate의 형식은 onUpdate : function() {...}'; 이것을 내부에 설정해보십시오 :'this.height = $ ('fancybox-iframe'). 내용(). find ('body'). innerHeight();' – JFK

답변

2

다행 당신은 당신의 대답을 발견하고 그것을 주셔서 감사합니다. 그냥 힌트 - 당신은 또한 더 div의 크기를 조정할 당신이 가지고있는 폭을 재조정하려면 Fancybox 1.3.4 사용자는

parent.$.fancybox.center(); 

입니다. 내 전체 크기 조정은 다음과 같습니다..

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

테스트 IE8 +, (자식 페이지 내부) 파이어 폭스, 크롬