1

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

有什么见解吗?

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

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

4

5 回答 5

7

我有同样的问题,使用灯箱 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() ];
},
......
于 2010-08-04T16:12:26.910 回答
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);
  }
});
于 2011-09-15T02:27:01.287 回答
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
    ];
},
于 2013-06-18T17:51:29.640 回答
0

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

于 2010-03-26T00:21:48.607 回答
0

在最新版本 (3) 中添加

 parentEl: 'html'

进入选项。我正在使用网站上特殊的两格商店布局,它没有居中,因为容器正在加载到主体中并且相对于它的高度。将其添加到 html 标记中可以解决此问题。

于 2018-03-30T11:24:04.710 回答