Fancybox onComplete - 分割した位置に配置することができます

Question

スクロールを無効にしてFacebookアプリ内のfancyboxを配置しようとしています。

onComplete関数はフレームの垂直中央に戻る前に数秒間動作します。何が中心に戻ってスナップしているのですか？

$("#footer-test-link").fancybox({ 
    "transitionIn" : "fade", 
    "transitionOut" : "fade", 
    "speedIn" : 300, 
    "speedOut" : 300, 
    "easingIn" : "fade", 
    "easingOut" : "fade", 
    "type": "ajax", 
    "overlayShow" : true, 
    "overlayOpacity" : 0.3, 
    "titleShow" : false, 
    "padding" : 0, 
    "scrolling" : "no", 
    "onComplete" : function() { 
     $("#fancybox-wrap").css({"top": 80 +"px"}); 
    } 
}); 

Answer 1

だけ！重要-オプション

#fancybox-wrap { 
    top: 80px !important; 
} 

を次のように '＃のfancyboxラップ' のCSS-プロパティを設定しようとjQueryのか、他のJavaScriptを変更することができないことを確認/このCSS設定を無効にします。

Answer 2

FancyBoxは、FancyBoxラッパー（#fancybox-wrap）とonCompleteコールバックを垂直に配置するイベントの間にrace conditionがあるため、分け目の位置を示しています。 onCompleteは通常最初に終了するので、css({"top": 80 +"px"})は上書きされます。これを修正する方法はいくつでも試してみることができますが、私はCSSルールをonCompleteに追加することをお勧めします。

'onComplete' : function() { 
    // Create a pseudo-unique ID - this is actually pretty weak and you may want to use a more involved method 
     var dt = new Date(); 
     var className = ('cl'+dt.getTime()).substr(0,10); // Create a unique class name 
    // Create a style element, set the contents, and add it to the page header 
     var style = document.createElement('style'); 
     jQuery(style).attr('type','text/css').html('.'+className+' { top: 80px !important; }').appendTo(jQuery('head')); 
    // Add the pseudo-unique class name to the FancyBox wrapper to apply the CSS 
     jQuery('#fancybox-wrap').addClass(className); 
} 

あなたはこのためにbetter unique idに見てみたいことがありますが、これは私のニーズに十分でした。この回答はFancyBox v1.xに関するものです（私はv1.3.4を使用しました）。 v2.xには異なる論理フローがあり、DOESには異なるコールバックがあります。 v2.xでonCompleteを使用する代わりに、FancyBox docsに従ってafterLoadまたはafterShowのいずれかを使用する必要があります。