jquery - Fancybox iframe 大小

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>

那么您绑定(bind)到 fancybox 的选择器是 .fancybox。

另一方面，

fancybox.iframe 是版本 2.x 中引入的特殊类，用于指示类型 内容 fancybox 需要打开，并且您不需要对其执行任何特定操作，因此:

<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了解该版本的选项、方法和回调的完整列表。