Question

我到处寻找这个问题。当用户点击链接时，它会加载带有iframe的fancybox。出于某种原因，iframe的尺寸很小。我试过调整宽度，高度，minWidth和minHeight设置，但没有区别。

这是标题中的相关代码（我已将所有Fancybox脚本链接起来）：

 <script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

<script type="text/javascript">
    $(document).ready(function() {
     $("iframe").fancybox({
        'width': 600,
        'height': 250,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'type': 'iframe'
    });
});
</script>

和html：

 <a class="fancybox fancybox.iframe"  href="iframe.html">link here </a>

有什么想法吗？

Answer 1

如果你有这个HTML

<a class="fancybox fancybox.iframe"  href="iframe.html">link here </a>

然后你绑定到fancybox的选择器是.fancybox。

另一方面，

fancybox.iframe是版本2.x 中引入的特殊类，表示fancybox需要的type内容打开，你不需要做任何特定的事情，所以：

<script type="text/javascript">
    $(document).ready(function() {
     $(".fancybox").fancybox({
        'width': 600,
        'height': 250,
        'transitionIn': 'elastic', // this option is for v1.3.4
        'transitionOut': 'elastic', // this option is for v1.3.4
        // if using v2.x AND set class fancybox.iframe, you may not need this
        'type': 'iframe',
        // if you want your iframe always will be 600x250 regardless the viewport size
        'fitToView' : false  // use autoScale for v1.3.4
    });
});
</script>

应该这样做。

请记住如果您使用的是fancybox v2.x，则API选项是新的，与以前的版本不兼容。检查http://fancyapps.com/fancybox/#docs以获取该版本的选项，方法和回调的完整列表。

Answer 2

尝试设置autoScale=false

儒略

Fancybox iframe大小

2 个答案: