动态设置Fancybox2的宽度/高度

我想用fancybox v2来显示其内容是动态生成的div。我在事物的计划中设定了div的大小。我试过了fancybox文档中的例子来显示大小固定的div。它看起来像这样：动态设置Fancybox2的宽度/高度

<a id="fancy" href="#showdiv">Show contents of div.</a> 
<div id="showdiv">...</div> 

<script> 
$(document).ready(function() { 
    $("#fancy").fancybox({autoSize:false, width: W, height: H, ...}); 
}); 
</script>

我要的是W=$("#showdiv").width和H=$("#showdiv").height。显然，在准备好文件时，H和W不可用。我如何去做这件事？

编辑：下面是内容DIV的HTML：

<div id="hidediv" style="display:none"> 
    <div id="showdiv" style="display:block;position:relative"> 
     <canvas id="mycanvas" style="position:relative;display:block"></canvas> 
    </div> 
</div>

在锚的点击处理程序 “#fancy” 我做的：

function onclick() { 
    var jcanvas = $("#mycanvas").css('width', some_width).css('height', some_height); 
    // draw on canvas 
}

“#fancy” 是一个与Fancybox相关联。

另：

来源

2013-04-03 rajorshi ghosh

'我把div的大小设置的很晚'：所以它的大小（至少是'width'），不是吗？如果这是正确的，那么你不需要在fancybox选项中设置'width'和'height'和'autoSize：false'，它们会自动计算，尽管'div'是在稍后添加的。 – JFK 2013-04-03 23:46:48

@JFK我试过但我已经看到，如果我不设置这些值，那么弹出窗口的宽度就会有错（总是大约100）。调整浏览器大小会强制重新调整宽度x高度。 – 2013-04-04 01:04:59

你可以发布动态添加'div'（#showdiv）的呈现html吗？并且，您如何设置其大小：动态？通过CSS？如果你想获得帮助，你需要提供大量的信息;） – JFK 2013-04-04 01:25:43

假设这个函数处理您HTTP POST

function onclick() { 
    // set size of canvas 
    var jcanvas = $("#mycanvas").css({ 
     "width": some_width, // variable from response ? 
     "height": some_height 
    }); 
    // draw on canvas 
}

响应...然后使用的fancybox afterLoad回调像

$("#fancy").fancybox({ 
    fitToView: false, // the box won't be scaled to fit the view port (optional) 
    afterLoad: onclick() 
});

编辑调用该函数选项是同时处理，同一功能u中的画布和fancybox唱的jQuery .on()所以如果你有

<a id="fancy" href="#showdiv">Show contents of div</a>

使用这个脚本：在这种情况下

$("#fancy").on("click", function() { 
    // do HTTP POST 
    // on success, get size form response 
    var some_width = 300, 
     some_height = 180; 
    // set canvas size 
    var jcanvas = $("#mycanvas").css({ 
     // variables from response 
     "width": some_width, 
     "height": some_height 
    }); 
    // draw on canvas 
    // 
    // then open fancybox ($(this) = #showdiv) 
    $.fancybox($(this),{ 
     // API options etc 
     fitToView: false 
    }); 
});

你不需要任何回调。

注意：.on()需要的jQuery V1.7 +

以作记录见JSFIDDLE。

来源

2013-04-04 02:50:36 JFK

酷！我会尝试并让你知道。谢谢。 – 2013-04-04 03:13:40

方法一为我工作。谢谢。 – 2013-04-04 15:16:58

动态设置Fancybox2的宽度/高度

回答

相关问题