jQuery fancybox 插件不在 safari 或 chrome 中，但在 Firefox 中答案

【问题标题】：jQuery fancybox plugin not centered in safari or chrome, but is in firefoxjQuery fancybox 插件不在 safari 或 chrome 中，但在 Firefox 中
【发布时间】：2010-03-25 23:14:25
【问题描述】：

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

有什么见解吗？

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

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

【问题讨论】：

离题，但您的某些链接无效

标签： jquery-plugins fancybox

【解决方案1】：

我有同样的问题，使用 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() ];
},
......

【讨论】：

感谢您提供此解决方案，但是您应该使用编码选项来过去代码示例，因为它不可读 + 您的链接已失效。
$(window).height() 返回文档高度而不是窗口高度if the document is currently loaded in Quirks Mode。
感谢上面的 sn-p。但是，它只解决了照片现在在屏幕上正确居中的问题。 fancybox-overlay（图像后面的半透明框）仍然不是 100% 的屏幕。还有其他需要调整的地方吗？
对于使用 Fancybox 1.3.4 的用户，该函数现在称为_get_viewport。

【解决方案2】：

上面的答案对我不起作用。我刚刚使用$.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);
  }
});

【讨论】：

在最新的fancybox中我认为新方法是$.fancybox.reposition()

【解决方案3】：

我也在使用 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
    ];
},

【讨论】：

我的荣幸！很高兴它有帮助。

【解决方案4】：

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

【讨论】：

你能多评论一下你是如何放置你的包装的吗？可以发一下代码 sn-p 吗？

【解决方案5】：

在最新版本（3）中添加

 parentEl: 'html'

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

【讨论】：