How to position fancybox on top

Question

How to position the fancybox 100px from top by default it is center aligned.

I believe there is no api settings for that. Can anyone help me out in doing it on the actual script.

Answer 1

The solution I got working was styling the wrapper like this:

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

Hope it helps!

Answer 2

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

Answer 3

In fancyBox 2 I use topRatio : 0, this propery move fancyBox at top, then I used jQuery().css() to put it where I want. Example:

$("#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');