Как разместить fancybox сверху

Question

Как разместить fancybox на 100 пикселей сверху, по умолчанию он выровнен по центру.

Я считаю, что для этого нет настроек API. Может кто-нибудь помочь мне в этом на самом сценарии.

Answer 1

Решением, которое я получил, было оформление обёртки следующим образом:

#fancybox-wrap {
  position: absolute;
  top: 100px !important;
}

Надеюсь, это поможет!

Answer 2

$.fancybox({
   'width'     : 620,
   'height'    : 490,
   'speedIn'    :600,
   'speedOut'   :200,
   'onComplete': function() {
      $("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
   }
});

Answer 3

В fancyBox 2 я использую topRatio : 0, это правильное перемещение вверху fancyBox, затем я использовал jQuery().css(), чтобы поместить его туда, куда я хочу. Пример:

$("#myfancy").fancybox({
    wrapCSS     : 'fancybox-custom',
    maxWidth    : 500,
    maxHeight   : 360,
    fitToView   : false,
    width       : '85%',
    height      : '95%',
    autoSize    : false,
    openEffect  : 'fade',
    openSpeed   : 'slow',
    closeEffect : 'fade',
    modal       : true,
    closeSpeed  : 'slow',
    topRatio    : 0,
    helpers         : {
        overlay     : {
            css     : {
                'background-color' : '#fff'
            }
        }
    }
}).trigger('click');
jQuery('.fancybox-wrap').css('margin-top', '120px');

Answer 4

scrollTop page.

$.fancybox({
       'width'     : 620,
       'height'    : 490,
       'speedIn'    :600,
       'speedOut'   :200,
       'onComplete': function() {
          $(document).scrollTop(0);
          $("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
       }
    });

Answer 5

Если вы просто хотите расположить fancybox немного выше, вы можете использовать этот параметр: "topRatio", посмотрите документ на http://fancyapps.com/fancybox/#docs.

Answer 6

Это работает.Просто добавьте стиль после загрузки fancybox css.Это перевесит любое движение.

<link rel="stylesheet" type="text/css" href="../css/fancybox/jquery.fancybox-1.3.4.css" media="screen" >
<style type="text/css">div#fancybox-wrap {top:100px !important;}</style>

Источник

http://groups.google.com/group/fancybox/browse_thread/thread/b874901b11414835/111301916450df93?lnk=gst&q=top#111301916450df93

Answer 7

$('.fancybox').fancybox({
    topRatio: 0, 
    afterShow: function(){
        $(".fancybox-wrap").css({"top":0, "margin":"100px 0 0"});
    }
});

Answer 8

Двусторонняя атака, но с использованием позиции «фиксированная» в отличие от абсолютной, отключит прокрутку и остановит движение кадра со страницы

Внутренний CSS:

.fancybox-wrap { position:fixed !important; top: 100px !important; };

fancyBox jQuery:

onComplete  : function(){
        $('.fancybox-wrap').css({'position':'fixed', 'top':'100px'});
    }

Answer 9

Если используется V2, то нижеприведенный вспомогательный метод поможет с мобильными устройствами:

$('.fancybox_success').fancybox({
    afterShow: function () {
        if ($portWidth <= $mobileBreakpoint) {
            $('html,body').animate({ scrollTop: 0 }, 'slow');
        }
    },...

Answer 10

Не знаю, является ли используемая версия fancybox 2.xxx, но в этом случае вы можете установить поле по умолчанию следующим образом:

$("#myfancy").fancybox({
margin     : [100, 0, 20, 0],
...

, где поле задает положение (px)обертки (первое число в массиве - TOP)