10

我是 j 查询的新手，这很酷，但我对如何使用以下代码为点击后生成的 iframe 添加宽度和高度一头雾水：所有建议都会很棒，提前感谢 Khadija

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

12 回答 12

18

您必须将autoSize设置为 false

$(".fancybox").fancybox({'width':400,
                         'height':300,
                         'autoSize' : false});
于 2014-07-06T00:04:20.967 回答
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阅读所有关于可用选项的信息。

于 2012-07-03T08:12:00.113 回答
3

尝试：

 $(document).ready(function () {
    $(".fancybox").fancybox({"width":400,"height":300});
 })
于 2012-07-03T07:52:28.753 回答
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>'
        });
    }
});
于 2017-02-01T06:42:43.400 回答
1

此代码设置花式动态@运行时的大小，只有您必须将高度和宽度与页面 url 一起传递给您要设置的对象

例如：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

        });
    }
于 2014-04-09T11:18:33.840 回答
0

您需要将 autoSize 设置为 false，为我工作

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

于 2014-10-15T12:57:57.000 回答
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'                   
                });
            });
        });
于 2014-12-12T12:12:35.097 回答
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,
   });
 })
于 2017-04-14T10:35:17.533 回答
0

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

$("[data-fancybox]").fancybox({
    iframe : {
        css : {
            height : '1000px',
        },
        preload : false
    },
});
于 2018-07-21T22:05:38.580 回答
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;
}
于 2019-01-04T07:29:26.130 回答
0

尝试修改或添加这一行：

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

于 2020-03-12T14:24:55.370 回答
-1

如果您仍有问题

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

在 jquery.fancybox.js 中修改它

于 2016-02-21T11:36:18.347 回答