0

fancybox v2 を使用して、コンテンツが動的に生成される div を表示しようとしています。私はdivのサイズを物事のスキームのかなり後半に設定しました。サイズが固定されているdivを表示するためのfancyboxのドキュメントの例を試しました。次のようになります。

<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 に関連付けられたものです。

4

1 に答える 1

0

この関数があなたの応答を処理すると仮定すると、HTTP POST

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

...次に、fancyboxafterLoadコールバックを使用してその関数を呼び出します

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

編集：

もう1つのオプションは、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-04T02:50:36.673 に答える