Fancybox onComplete - Позиционирование работает в течение секунды секунды

Question

Я пытаюсь разместить fancybox, находящийся внутри приложения Facebook, с отключенной прокруткой.

Функция 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

просто пытаются установить Css-свойство '# FancyBox-обертку', как следующий

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

важно!-Вариант того, чтобы Jquery или другой JavaScript не может изменить/переопределить эту настройку css.

Answer 2

FancyBox показывает ваше позиционирование в течение секунды секунды, потому что между событием, которое вертикально центрирует обертку FancyBox () и обратным вызовом onComplete, есть race condition. onComplete обычно заканчивается первым, поэтому css({"top": 80 +"px"}) затем переписывается. Вы можете попробовать любое количество способов исправить это, но я предпочитаю добавлять правило CSS onComplete, а не заставлять позицию каждого FancyBox когда-либо, как это делает решение для алгоритма.

'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 может иметь различный логический поток и имеет разные обратные вызовы. Вместо использования onComplete в v2.x вам нужно будет использовать либо afterLoad, либо afterShow в соответствии с FancyBox docs.