javascript 当fancybox-wrap高度改变时如何调用fancybox resize函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19108829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call fancybox resize function when fancybox-wrap height changes
提问by Learning
I have need to show this gallery as http://tympanus.net/Tutorials/ResponsiveImageGallery/in fancy box. It works fine except one design problem that is fancybox doesn't come in the center for first time as it has to download few image for first time if one open the same album second time it then show correctly in the center as all image are cached. I tried to resolve this issue with following code but it is not work
我需要 在花哨的框中将此画廊显示为http://tympanus.net/Tutorials/ResponsiveImageGallery/。它工作正常，除了fancybox 的一个设计问题第一次没有出现在中心，因为如果第二次打开同一个相册，它必须第一次下载很少的图像，然后它在中心正确显示，因为所有图像都被缓存. 我试图用以下代码解决这个问题，但它不起作用
I cant give fancybox fixed width and height as images are of different dimensions
我不能给fancybox固定宽度和高度，因为图像的尺寸不同
$(".fancybox-frame").fancybox({
maxWidth: 740,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '70%',
autoSize: true,
closeClick: true,
hideOnOverlayClick: true,
openEffect: 'none',
closeEffect: 'none',
onComplete: function () {
$.fancybox.resize();
$.fancybox.center();
}
});
Other solution i can think of is to call fancybox.center()and $.fancybox.center();function when fancybox wrapper with changes fancybox-wrap.
我能想到的其他解决方案是在有变化的fancybox包装器时调用fancybox.center()和$.fancybox.center();运行fancybox-wrap。
This i can help me correctly repositioning the fancybox in center.
这我可以帮助我正确地重新定位中心的fancybox。
But i am not sure how to track height change for fancybox-wrapand call the reposition the fancy box.
但我不确定如何跟踪高度变化fancybox-wrap并将重新定位称为花式框。
Fancybox V 1.3.4 Help in this regarding is appreciated.
Fancybox V 1.3.4 在这方面的帮助表示赞赏。
UPDATE:
更新：
Just to give you an idea i face similar problem that is happend on this link.
只是为了给您一个想法，我遇到了此链接上发生的类似问题。
http://www.picssel.com/playground/jquery/getImageAjax.html
http://www.picssel.com/playground/jquery/getImageAjax.html
When you click for the first time it small fancy-box and doesn't re-size when image is downloaded. In my case i have to download multiple image and it take time to display the first image in between takes default value but doent resize when first image is download.
当您第一次单击时，它会显示一个小花式框，并且在下载图像时不会重新调整大小。在我的情况下，我必须下载多个图像并且需要时间来显示其间的第一个图像采用默认值但在下载第一个图像时不调整大小。
回答by Anil kumar
set autoSizeto false in order to set width and height for fancybox. i.e.
设置autoSize为false以设置fancybox的宽度和高度。IE
$(".fancybox-frame").fancybox({
maxWidth: 740,
maxHeight: 600,
fitToView: false,
autoSize: false,
width: '70%',
height: '70%',
closeClick: true,
hideOnOverlayClick: true,
openEffect: 'none',
closeEffect: 'none',
onComplete: function () {
$.fancybox.resize();
$.fancybox.center();
}
});
Hope this helps you.
希望这对你有帮助。
回答by Anil kumar
Dynamic Inline Content Loading
动态内联内容加载
function loadAnswer(id){
jQuery.fancybox({
'content' : jQuery("#outerFAQ"+id).html(),
/*For Auto height and width*/
'onComplete' : function(){
jQuery('#fancybox-wrap').css({height:'auto',width:'auto'});
jQuery.fancybox.resize();
jQuery.fancybox.center();
}
});
}
/*Dynamically Set the id and passing it to function*/
<a class="fancybox" href="#" onClick="loadAnswer(<?php echo $data->getId()/*Dynamic id*/ ?>);"> Demo </a>
<div id="outerFAQ<?php echo $data->getId(); ?>" style="display:none;">
<div id="ans<?php echo $data->getId();?>">
demo
</div>
<div>
Single inline content loading
单个内联内容加载
jQuery( "#demo" ).click(function() {
jQuery.fancybox({
'content' : jQuery("#demoContent").html(),
onComplete: function () {
/*Static height width*/
jQuery("#fancybox-content").css({
height:'500px',
overflow:'scroll',
});
jQuery("#fancybox-wrap").css("top","10");
jQuery(".fancybox-wrap").css("position", "absolute");
}
});
<a id="demo" href="#">Click me</a>
<div style="display: none">
<div id="demoContent">
demo
</div>
</div>
回答by Vipin Kumar R. Jaiswar
if you fancybox is already open and want to resize then below code will helps you.
如果您的 Fantasybox 已经打开并想要调整大小，那么下面的代码将对您有所帮助。
$.ajax({
url: 'YOUR URL',
data:'DATA WANT TO TRANSFER',
type: 'post'
dataType: "text",
success:function(result){
//PLAY WITH RESULT SET
$.fancybox.toggle();
},
error:function(request,error){
alert("Error occured : "+error);
}
});
Reference from : Resize Fancybox
参考自：调整 Fancybox 的大小
回答by Learning
Solution, I managed to make it work by resizing after delay of 3 seconds by that time first image is downloaded completely
解决方案，我设法通过在延迟 3 秒后调整大小来使其工作，到那时第一张图像已完全下载
$(".fancybox-iframe").fancybox({
width: '70%',
height: '70%',
hideOnOverlayClick: true,
centerOnScroll:true,
onComplete : function(){
// $.fancybox.resize();
// $.fancybox.center();
var resize = setTimeout(function () {
$.fancybox.center();
}, 3000)
}
});
I believe more professional approach will be check using jquery when image is downloaded completely and then call $.fancybox.center();function
我相信更专业的方法会在图像完全下载后使用 jquery 检查然后调用$.fancybox.center();函数
Please if this is fine or we can do it some otherway.
请如果这很好，或者我们可以通过其他方式做到这一点。
回答by Amin
Did you try to use <center></center>include of your fancybox? I think so it'll work on your page. and no need to use java, cause you are just trying to use it as center.
您是否尝试使用<center></center>包含您的花式盒？我想它会在你的页面上工作。不需要使用java，因为你只是想用它作为中心。
