런타임 중에 jQuery Fancybox의 크기를 조정하는 방법을 아는 사람이 있습니까?런타임시 Fancybox의 크기를 어떻게 조정합니까?
나는이 작업을 수행 할 수있는 fancybox 초기화 할 때 :
$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });
내가 동적 콘텐츠와 fancybox를 작성하고 내가 그 내용에 따라 크기를 조정할합니다.
$("tag").fancybox.option('frameWidth', 500);
를하지만 그런 방법을 제공하지 않는 것, 당신은 직접 CSS를 설정해야합니다 :
Fancybox jQuery를 UI의 일부가 된 경우는 다음과 같이 그것을 할 것
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
Alan의 솔루션은 크기를 수정 한 후에 상자가 더 이상 화면 중앙에 표시되지 않으므로 (적어도 최신 jquery 및 fancybox 버전에서는) 불완전합니다.
그래서, 완벽한 솔루션은 다음과 같습니다
$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();
당신이 버전 Fancybox 1.3을 사용하는 경우, 크기 조절 방법이있다 :
$ .fancybox.resize(); 버전 2.x of Fancybox 같은를 들어
은
와 함께 할 것입니다 :
.$ .fancybox.update() 그 안에 내용의 크기에 따라 활성 fancybox의 크기를 조정합니다
$ ("# fancybox-wrap") 너비 (너비); // 또는 높이 또는 무엇이든
$ .fancybox.center();
거의 2 일간 싸우고 난 후 오버레이 높이를 변경했습니다. 이 도움이 될 수 있기를 바랍니다 :
$('#register-link a').fancybox({
onComplete: function(){
body_height = $('body').height();
fancybox_content_height = $('#fancybox-content').height();
fancybox_overlay_height = fancybox_content_height + 350;
if(body_height < fancybox_overlay_height) {
$('#fancybox-overlay').css('height', fancybox_overlay_height+'px');
}
}
});
나는 단지 당신이 그것을 인식하도록하고 싶습니다.
javascript를 사용하여 높이를 조정 한 솔루션을 검색 한 후 내 파트너가 놀라운 것을 실현했습니다.
# fancybox-inner를 포함하는 요소에 PADDING 또는 MARGIN이 설정되어 있는지 확인하십시오.
이 키 요소 (직접 # fancybox-의 내측 마진/패딩 정의 아이.
자식 요소 (#의 fancyfox-내측> div>이다.여기에) 패딩을 가질 수 있지만, 조정하는 것을 잊지 말아 :
$('#element').fancybox({
'onComplete' : function(){
$.fancybox.resize();
}
});
난 그냥 공개 방법 $의 .fancybox.reshow 추가의 Google 그룹 https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8에 Fancybox에 제안 패치를 게시(). 이렇게하면 fancybox의 높이와 너비가 다시 계산됩니다. 그것은 예를 들어, window.onorientationchange 및 window.onresize 모두 작동 :
window.onresize = function() {
$.fancybox.reshow();
}
$ .fancybox.resize(); 나를 위해 작동하지 않았다, 그래서 fancybox은 iframe 내에서,로드 페이지에이 코드를 삽입했습니다
이$(document).ready(function(){
parent.$("#fancybox-content").height($(document).height());
});
또한 콜백에서 설정할 수 :
$("#mydiv").toggle('fast', function(){
parent.$("#fancybox-content").height($(document).height());
});
function overlay(){
var outerH = $('#fancybox-outer').height();
var bodyH = $(window).height();
var addH = 300; //add some bottom margin
if(outerH>bodyH){
var newH = outerH + addH;
}else{
var newH = bodyH + addH;
}
$('#fancybox-overlay').height(newH+'px');
$.fancybox.center();
}
및 당신이 필요로 할 때 이벤트에 전화를 ... -
... 'onSelect' : function(event,ID,fileObj){
overlay();
}, ...
이있다 (예를 들어, uploadify onSelect를 이벤트.> 긴 파일 목록이 fancybox 그렇게 큰 만들고, 우리는 다시 높이를 계산) 이 솔루션은 내을 형성 :
$("#linkpopup").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'onComplete' : function(){
$.fancybox.resize();
}
});
내가 너무 fancybox 크기 조정 고생. 솔루션은 $.fancybox.reposition();
매력처럼 작동합니다!
나는 Google에서 오랜 시간을 검색했지만 아무것도 찾지 못한 후이 버그에 대한 해결책을 찾았습니다.
페이지와 센터를의 폭과 높이에있는 상자의 크기를 조정하려면 다음을 수행하십시오 StackOverflow.com에 기여하는 모든 사람에게$("#click-to-open").click(function(){
var url = "url-loader.php";
$.fancybox({
'autoScale' : false,
'href' : url,
'padding' : 0,
'type' : 'iframe',
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'onComplete' : function(){
$('#fancybox-content').removeAttr('style').css({ 'height' : $(window).height()-100, 'margin' : '0 auto', 'width' : $(window).width()-150 });
$('#fancybox-wrap').removeAttr('style').css({ 'height' : $(window).height()-100, 'margin' : '0 auto', 'width' : $(window).width()-150 }).show();
$.fancybox.resize();
$.fancybox.center();
}
});
});
감사합니다. 당신은 모두 저에게 여러 번 생명의 은인이었습니다. 이제, 나는 결국 무언가를 기여하게됩니다. 아래는 런타임 대기열에서 resize fancybox를 어떻게 처리 할 수 있었는지입니다 :
PHP vars가 전달 된 href 요소 별 속성을 할당했습니다.
찾기 : 그런 다음
<a href="ASSET_ABSOLUTE PATH" class="asset" data-fancybox-type="iframe" assetW="$assetW"
assetH="$assetH">LINK</a>
$(".asset").click(function(){
var assetW = $(this).attr('assetW');
//to display inter-activities..
$(".asset").fancybox({
width : assetW,
fitToView : false,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
'onComplete' : function(){
$.fancybox.resize();
}
});
});
내 솔루션은 그 (fancybox 1.3.4 용) 같았다 ...라고하고, fancybox 제어 기능과 내에 포함 된 매개 변수를 사용하여, 클릭 이벤트에 속성을 설정
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
$.fancybox.center(true);
};
과 나 ', 내 경우에는
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
view = _get_viewport();
var updated_width = view[0];
if (updated_width > selectedOpts.width) { updated_width = selectedOpts.width; }
$("#fancybox-wrap, #fancybox-content").css("width", updated_width);
$.fancybox.center(true);
};
시간을 절약 해 주셔서 감사합니다. +1 – Toretto
로 교체 Fancybox를 사용하여 이미지가 포함 된 매우 간단한 웹 페이지를 표시합니다. 이 이미지의 크기가 다를 수 있습니다. 내 문제는 이미지에 style="height: NNpx; width: NNpx;"이 포함되지 않았다는 것입니다. 그것 없이는 fancybox autoSize가 예기치 않은 결과를 낼 수 있습니다 (문서 에 명시).
tl; dr : autoSize가 올바르게 작동하기위한 width 및 height 속성을 제공합니다.
이 방법은 저에게 효과적입니다.:)
$(".fancybox-wrap.fancybox-desktop.fancybox-type-iframe.fancybox-opened").css({"height": heightToAdjust});
$(".fancybox-inner").css({"height": heightToAdjust});
if ($.fancybox.isOpened) {
if ($.fancybox.current) {
$.fancybox.current.height = heightToAdjust;
}
}
$.fancybox.reposition();
사용 :
parent.jQuery.fancybox.update();
(최신 버전) Fancybox 3에 참조
parent.jQuery.fancybox.getInstance().update();
방금 내용을 설정할 수 없습니다 fancybox를 다시 호출 하시겠습니까? – rossipedia