使用fancybox设置高度和宽度

时间:2012-07-03 07:47:34

标签: jquery fancybox

我是j查询的新手,很酷,但是如果使用这段代码点击后生成的iframe增加宽度和高度的天花板,我会紧紧抓住:所有的建议都很棒,并提前感谢 哈蒂嘉

$(document).ready(function () {
    $(".fancybox").fancybox();
 })
 .height = '600px';

12 个答案:

答案 0 :(得分:17)

您必须将 autoSize 设置为false

$(".fancybox").fancybox({'width':400,
                         'height':300,
                         'autoSize' : false});

答案 1 :(得分:6)

要初始化用于使用iframe的fancybox弹出框,限制为特定的宽度和高度,您至少需要三个参数:

<强>的jQuery

$(document).ready(function(){ 
  $(".fancybox").fancybox({
    'width'  : 600,           // set the width
    'height' : 600,           // set the height
    'type'   : 'iframe'       // tell the script to create an iframe
  });
}); 

您可以在FancyBox API Page了解所有可用选项。

答案 2 :(得分:3)

尝试:

 $(document).ready(function () {
    $(".fancybox").fancybox({"width":400,"height":300});
 })

答案 3 :(得分:2)

嘿使用下面给出的代码:

fancybox({
    afterLoad  : function () {
        $.extend(this, {
            aspectRatio : false,
            type    : 'html',
            width   : '90%',
            height  : '90%',
            content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
        });
    }
});

答案 4 :(得分:1)

此代码设置大小的花式动态@运行时间只需要通过高度&amp;宽度以及您要设置的页面网址

例如:demo.aspx      //此语句调用主页中出现的奇特函数

       window.parent.SetFancySizeDynamic(YourPageUrl,300,200)

  MainPage.aspx

//只需在主页面中添加此功能

    function SetFancySizeDynamic(fbHref, fbWidth, fbHeight) {

        $.fancybox({
            'padding': 0,
            'overlayColor': '#ccc',
            'type': 'iframe',
            'href': fbHref,
            'width': fbWidth,
            'height': fbHeight

        });
    }

答案 5 :(得分:0)

你需要将autoSize设置为false,为我工作

$(&#34; .fancybox&#34)的fancybox({&#39;宽度&#39;:400,                          &#39;高度&#39;:300,                          &#39; autoSize的&#39; :false});

答案 6 :(得分:0)

jQuery(function($){     
            $(document).ready(function() {
        $("#lightwindow").fancybox({
                    minWidth: 250,
                    width: 250,
                    minHeight: 500,
                    height: 500,
                    'autoScale': false,
                    'autoDimensions': false,
                    'scrolling'     : 'no',
                    'transitionIn'  : 'none',
                    'transitionOut' : 'none',
                    'type': 'iframe'                   
                });
            });
        });

答案 7 :(得分:0)

使用iframe

   $(document).ready(function () {
        $(".fancybox").fancybox({
            width:600,
            height:400,
            type: 'iframe',
            href  : 'url_here'
       });
     })

没有iframe

 $(document).ready(function () {
    $(".fancybox").fancybox({
        width:600,
        height:400,
        autoDimensions: false,
   });
 })

答案 8 :(得分:0)

对我有用的唯一方法是在iframe上使用 preload = false

$("[data-fancybox]").fancybox({
    iframe : {
        css : {
            height : '1000px',
        },
        preload : false
    },
});

答案 9 :(得分:0)

使用此CSS:)

.fancybox-overlay .fancybox-skin {
   max-width: 900px !important;
   margin: auto;
}

.fancybox-overlay .fancybox-inner {
  max-width: 900px;
  margin: auto;
}

.fancybox-overlay .fancybox-skin {
   margin: auto;
}

答案 10 :(得分:0)

尝试修改或添加以下行:

.fancybox-content{width:360px !important;height:400px !important;}

答案 11 :(得分:-1)

如果您还有问题

            width      = current.width,
            height     = current.height,

在jquery.fancybox.js中修改它