Question

We’re loading a fancybox manually by passing content like so:

$.fancybox({
    content: content,
    showCloseButton: false,
    transitionIn: 'fade',
    transitionOut: 'fade',
    speedIn: 600,
    padding: 0,
    fixed: false
});

We want the fancybox to stay where it is in relation to the document after it first loads (absolute positioning).

Setting fixed to false makes the fancybox elastically stay in the center of the screen during scrolling. We’d really like the fancybox to:

• center itself in the viewport on load
• maintain absolute positioning and stay where it is relative to the document when scrolling

Any ideas?

Answer 1

Figured it out, you need to also set autoCenter to false like so:

$.fancybox({
    content: content,
    showCloseButton: false,
    transitionIn: 'fade',
    transitionOut: 'fade',
    speedIn: 600,
    padding: 0,
    fixed: false,
    autoCenter: false
});