在Fancybox中自动调整高度 [英] Auto height resizing in Fancybox
问题描述
为了不劫持其他帖子，我决定创建自己的帖子.我已经纠缠了好几天，无法弄清楚如何自动将Fancybox iFrame的高度调整为内容大小.这是我的称呼方式:
In an attempt not to hijack other posts I've decided to start my own one. I've been messing about for days and cannot figure out how to have the height of Fancybox iFrame automatically size to the content. Here's how I'm calling it:
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox()({
maxWidth : 713,
minHeight : 250,
fitToView : false,
autoSize : true,
autoScale : true,
closeClick : true,
openEffect : 'fade',
closeEffect : 'fade',
scrolling : false,
padding : 0,
});
});
</script>
我认为设置minHeight和autoScale可以做到，但事实并非如此.而使用resize();则无济于事.
I thought that setting a minHeight and autoScale would do it but it hasn't. And using resize(); does nothing.
谢谢！
推荐答案
首先，我希望您能理解当您说"Fancybox iFrame"时的意思，这意味着您正在使用fancybox的打开外部html/php文件.选项iframe，可以将其设置为链接中的class，例如:
First, I hope you understand what you mean when you say "Fancybox iFrame", which it means that you are opening an external html/php file using the fancybox's option iframe, either setting it as a class within your link like :
<a href="external.html" class="fancybox fancybox.iframe">open external file in fancybox</a>
(我假设您正在使用fancybox v2.x，因为您的脚本中的选项)...或作为您自定义脚本中的一个选项:
(I assume you are using fancybox v2.x because the options in your script) ... or as an option within your custom script:
$(".fancybox").fancybox({
width: 620, // or whatever
heigh: 320,
type: "iframe"
});
第二，您需要注意fancybox v1.3.x和v2.x的选项彼此不兼容.例如，您在脚本fitToView(fancybox v2.x)和autoScale(v1.3.x)中使用.如果您确实使用的是fancybox v2.x，则不会识别autoScale.
Second, you need to beware that options for fancybox v1.3.x and v2.x are not compatible with each other. For instance, you are using in your script fitToView (fancybox v2.x) and autoScale (v1.3.x). If you are really using fancybox v2.x, autoScale won't be recognized.
第三，resize()都不是fancybox v1.3.x或v2.x的选项.如果使用v2.x，则应使用$.fancybox.update()
Third, resize() is neither an option for fancybox v1.3.x or v2.x. If using v2.x, you should rather use $.fancybox.update()
最后，在iframe模式下打开时，我认为自动"调整花式框大小的唯一可能的方法是:
Last, the only possible (should I say, the "easiest") way I think to "auto" resize fancybox when opened in iframe mode is:
- 您应该可以控制要打开的
external.html页(您应该拥有它并最终在同一域中运行)，以便可以添加fancybox调整其大小所需的元素.不是您的其他页面(例如，picssel.com)将不允许您自动自动调整iframe的大小(您可以手动调整它们的大小，但我认为不是这样). - 您应该至少使用fancybox 2.0.6 +
- you should have control over the
external.htmlpage you want to open (you should own it and running eventually within the same domain) so you can add the elements that fancybox would need to resize it. Other pages that are not yours (picssel.comfor instance) won't allow you to auto-resize the iframe automatically (you could re-size them manually but I don't think that's the idea.) - you should be using fancybox at least 2.0.6+
操作方法?
编辑您的external.html文件，并将尺寸设置为<html>标记，例如
Edit your external.html file and set dimensions to the <html> tag like
<html lang="en" style="width: 800px; height: 400px;">
(尽管您可能只希望分配height属性)
(you may want to assign the height property only though)
然后使用回调选项beforeShow从iframe获取尺寸，例如:
Then use the callback option beforeShow to get the dimension from the iframe like:
beforeShow: function(){
this.width = $('.fancybox-iframe').contents().find('html').width();
this.height = $('.fancybox-iframe').contents().find('html').height();
}
此外，fitToView应该设置为false
检查 https://stackoverflow.com/a/10776520/1055987 以获得示例代码，该代码还包括演示.
Check https://stackoverflow.com/a/10776520/1055987 for a sample code, which it also includes a DEMO.
这篇关于在Fancybox中自动调整高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
