在Fancybox中自动调整高度

Question

在Fancybox中自动调整高度

为了不劫持其他帖子,我决定开始自己的帖子.我已经搞乱了几天,无法弄清楚如何让FancyboxiFrame 的高度自动调整大小.这是我如何称呼它:

<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>

Run Code Online (Sandbox Code Playgroud)

我认为设置minHeight和autoScale可以做到,但事实并非如此.使用resize();什么都不做.

谢谢大家!

Answer 1

JFK*_*JFK 18

首先,我希望你理解当你说"Fancybox iFrame"时你的意思,这意味着你使用fancybox的选项打开一个外部的html/php文件iframe,或者将它设置为class你的链接,如:

<a href="external.html" class="fancybox fancybox.iframe">open external file in fancybox</a>

Run Code Online (Sandbox Code Playgroud)

(我假设你使用的是fancybox v2.x,因为你的脚本中的选项)......或者作为自定义脚本中的一个选项:

$(".fancybox").fancybox({
 width: 620, // or whatever
 heigh: 320,
 type: "iframe"
});

Run Code Online (Sandbox Code Playgroud)

其次,您需要注意fancybox的选项v1.3.x并且v2.x彼此不兼容.例如,您正在使用脚本fitToView(fancybox v2.x)和autoScale(v1.3.x).如果你真的使用fancybox v2.x,autoScale将无法识别.

第三,resize()既不是fancybox v1.3.x或v2.x的选项.如果使用v2.x,则应该使用$.fancybox.update()

最后,在iframe模式下打开时,我认为"自动"调整fancybox的唯一可能(我应该说是"最简单")方式是:

您应该控制external.html要打开的页面(您应该拥有它并最终在同一个域中运行),这样您就可以添加fancybox调整大小所需的元素.其他不属于您的页面(picssel.com例如)将不允许您自动调整iframe的大小(您可以手动调整它们的大小,但我认为这不是主意.)
你应该使用fancybox至少2.0.6+

如何？

编辑external.html文件并将标尺设置为<html>标签

<html lang="en" style="width: 800px; height: 400px;">

Run Code Online (Sandbox Code Playgroud)

(您可能只想分配height属性)

然后使用回调选项beforeShow从iframe类似的方式获取维度:

  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('html').width();
   this.height = $('.fancybox-iframe').contents().find('html').height();
  }

Run Code Online (Sandbox Code Playgroud)

另外,fitToView应该设置为false

检查/sf/answers/754356431/以获取示例代码,其中还包含一个DEMO.

归档时间：	13 年，11 月前
查看次数：	63224 次
最近记录：	10 年，10 月前