jQuery fancybox插件不是以safari或chrome为中心,而是在firefox中

时间:2010-03-25 23:14:25

标签: jquery-plugins fancybox

我刚刚在我的网站上安装了fancybox,它在firefox中完美运行,但是当我在chrome和safari中尝试时,fancybox并不在浏览器窗口的中心。

任何见解?

您可以在以下位置查看演示:

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

5 个答案:

答案 0 :(得分:7)

我遇到了同样的问题,使用lightbox 1.3.1和jquery 1.4.2。

在查看代码之后,我在函数fancybox_get_viewport中发现了问题。它使用$(window).width()和$(window).height()确定当前视口。问题是,在Chrome和Safari上,这些功能会返回文档宽度和高度。在Opera上,请参阅http://updatepanel.net/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/

解决方法很简单。使用window.innerHeight ? window.innerHeight : $(window).height();

这是修改过的函数,在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() ];
},
......

答案 1 :(得分:7)

上面的答案对我不起作用。我只是使用$.fancybox.center(true);来解决打开fancybox时的问题。之前有时它会居中。或者在我调整视口大小后它会居中。 编辑:我猜这个错误与问题中的错误略有不同,因为它确实发生在firefox,IE,chrome,所有内容中。

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

答案 2 :(得分:2)

我也在使用Fancybox 1.3.4并解决,我做了类似于上面建议的事情,但是,1.3.4中的功能略有不同 - 以防万一有什么我不使用的问题Fancybox 2 - 这只是因为新的许可证。希望这会有所帮助:

_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
    ];
},

答案 3 :(得分:0)

讨厌回答我自己的问题,但也许这会有助于另一个问题。我在我的内容中添加了一个包装器,现在工作正常。

答案 4 :(得分:0)

在最新版本(3)中添加

 parentEl: 'html'

进入选项。我使用网站上特殊的双层商店布局而不是居中,因为容器正在加载到主体中并且相对于它的高度。将其添加到html标记中会修复此问题。