Настройка Fancybox2 ширина/высота динамически

Question

Я пытаюсь использовать fancybox v2 для отображения div, содержимое которого генерируется динамически. Я установил размер div довольно поздно в схеме вещей. Я попробовал примеры из документации fancybox для отображения div, размер которых исправлен. Это выглядит следующим образом:

<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 недоступны мне при подготовке документа. Как мне это сделать?

EDIT: Вот HTML для DIV контента:

<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.

Answer 1

Предполагая, что эта функция обрабатывает ответ вашего 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() 
}); 

EDIT:

Другое опция - обрабатывать как холст, так и fancybox в пределах одной и той же функции u петь 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 для целей документирования.