jQuery fancybox plugin not centered in safari or chrome, but is in firefox

I've just installed fancybox on my site, and it works perfectly in firefox, but when I try it out in chrome and safari, the fancybox is not centered in the browser window.

Any insights?

You can v开发者_高级运维iew a demo at:

http://kotyy.com/kotyy/lindseyandasp/test2.xhtml

I had the same problem, using lightbox 1.3.1 and jquery 1.4.2.

After a short looking to the code I found problem in function fancybox_get_viewport. It determines current viewport using $(window).width() and $(window).height(). Problem is that on Chrome and Safari this funcions returns document width and heigh. On Opera too, see http://updatepanel.net/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/

Workaround is easy. Use window.innerHeight ? window.innerHeight : $(window).height();

Here is modified function, replace in your jquery.fancybox-1.3.1.js:

fancybox_get_viewport = function() {
    return [ (window.innerWidth ? window.innerWidth : $(window).width()), 
         (window.innerHeight ? window.innerHeight : $(window).height()),
         $(document).scrollLeft(), $(document).scrollTop() ];
},
......

The answer above didn't work for me. I just used $.fancybox.center(true); to fix the problem when the fancybox is opened. Before only sometimes it would center. Or it would center after I resized the viewport. Edit: I guess this bug is slightly different from the one in the question, since it does occur in firefox, IE, chrome, everything.

$('a.whatever').fancybox({
  //Your options here...
  onComplete: function(links, index) {
    //leave this at the bottom
    $.fancybox.center(true);
  }
});

I also am using Fancybox 1.3.4 and to resolve, I did something similar to what's suggested above, however, the function was slightly different in 1.3.4 - just in case there's any questions as to why I'm not using Fancybox 2 - it's simply because of the new license. Hope this helps:

_get_viewport = function() {
    return [
        (window.innerWidth?window.innerWidth:$(window).width()) - (currentOpts.margin * 2),
        (window.innerHeight?window.innerHeight:$(window).height()) - (currentOpts.margin * 2),
        $(document).scrollLeft() + currentOpts.margin,
        $(document).scrollTop() + currentOpts.margin
    ];
},

Hate to answer my own question, but maybe it will help another out. I added a wrapper to my content and it works fine now.

In the newest version (3) add

 parentEl: 'html'

into the options. I'm using the special two-paned store layout from the website and its not centering because the container is loading into the body and is relative to its height. Adding it into the html tag instead fixes this.