Fancybox onComplete - позиционирование работает за доли секунды - PullRequest
Новая
       40

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

1 голос
/ 10 января 2012

Я пытаюсь разместить 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"});
    }
});

Ответы [ 2 ]

0 голосов
/ 09 января 2014

FancyBox показывает ваше позиционирование в течение доли секунды, поскольку существует условие гонки между событием, которое вертикально центрирует оболочку FancyBox (#fancybox-wrap), и обратным вызовом onComplete.Обычно onComplete заканчивается первым, поэтому css({"top": 80 +"px"}) перезаписывается.Вы можете попробовать любое количество способов исправить это, но я предпочитаю добавлять правило CSS наComplete, а не форсировать положение каждого 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);
}

Возможно, вы захотите изучить лучше уникальный идентификатор для этого, но этого было достаточно для моих нужд.Обратите внимание, что этот ответ относится к FancyBox v1.x (я использовал v1.3.4).v2.x может иметь другой логический поток, а DOES имеют разные обратные вызовы.Вместо использования onComplete, в v2.x вам нужно будет использовать afterLoad или afterShow в соответствии с FancyBox docs .

0 голосов
/ 31 мая 2012

просто попробуйте установить свойство css для '# fancybox-wrap' следующим образом: 

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

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

...