FancyBox 在页面上打开过低

Question

我在我的页面上使用 FancyBox，有时（但并非总是）灯箱在页面下方打开得太远，在底部被截断，让您向下滚动以查看其余部分。通常，它将位于页面的死点。

当我调用它时，我在 onStart 方法中将其位置设置为 fixed，并且大多数时候它确实像它应该的那样在中心打开 - 所以我不'不知道是什么导致它被抛出，但只是有时。

该站点是Raditaz.com：播放现有电台（或创建自己的 - 您不需要帐户）然后点击中间的专辑封面打开灯箱。

对此的任何线索将不胜感激 - 谢谢！

编辑：一些更新...

• 如果我在打开 FancyBox 后调整窗口大小，它会在中心正确地重新定位（但只有在我关闭并重新打开它之前，它会再次移动得太低）
• WebKit 浏览器（Safari 和 Chrome）中似乎最常出现定位错误

编辑 2：我应该指出我们使用的 Fancybox 版本是 1.3.4，而不是较新的 2.0。我们的 jQuery 版本是 1.6.4。使用 Fancybox 2.0 可能会解决问题，但是（我认为）需要 jQuery 1.7，它与我们正在使用的其他一些插件不兼容。所以我更喜欢一个适用于 Fancybox 1.3.4 的修复程序。

Answer 1

我访问了您的网页，并且在发现错误后能够反复重现问题，并且使用的是 Firefox。

首先，这是该问题的参考照片：

请注意，上图中的 Fancybox 不在浏览器中居中，艺术家照片的顶部就在您正在使用的 Totem Ticker Plugin 下方。

下一张参考照片是红框部分的特写，显示 图腾代码 正在覆盖对象：

这两个问题是相关的。要重现 FancyBox 在页面上打开过低 问题，您需要点击之前播放过几首歌曲的居中大图旁边的迷你艺术家图片，而 Totem Ticker 插件正在制作动画。

这些参考图片显示了时机合适时会发生什么。如果时机不对或滑块正在使用缓存中尚未清除的图像，则需要重试。通常您会开始看到 Totem Ticker 与其他对象重叠。

既然已经发现了这个错误，这里有一个可行的解决方案来解决它。您将使用 Fancybox 插件中的回调在 Fancybox 即将动画时关闭 Totem Ticker，并在 Fancybox 关闭时重新打开 Totem Ticker。

由于 Totem Ticker 没有任何 API 与之交互，因此您必须使用该插件概述的过程通过锚定按钮使用开始和停止选项。好消息是您不需要与它相关联的文本链接，因此它不会被看到。这是要查看的代码：

jQuery Totem Ticker jQuery Before:

    $('#trending ul').totemticker({
        direction: 'up',
        interval: 5000,
        mousestop: true,
        row_height: '74px'
    });


jQuery Totem Ticker jQuery After:

    $('#trending ul').totemticker({
        direction: 'up',
        interval: 5000,
        mousestop: true,
        row_height: '74px',
        start: '#totemStart',
        stop: '#totemStop'
    });



jQuery Totem Ticker HTML Before:

        <div id="trending" class="column aside">
            <div class="section title"><span>Top Trending Stations</span></div>
            <div class="fadeout"></div>
            <ul></ul>
        </div>


jQuery Totem Ticker HTML After:

        <div id="trending" class="column aside">
            <div class="section title"><span>Top Trending Stations</span></div>
            <div class="fadeout"></div>
            <ul></ul>
            <a id="totemStart" href="#"></a>
            <a id="totemStop" href="#"></a>
        </div>





Imported raditaz.min.build File Before:

    $("#album-art-anchor").fancybox({
        scrolling: "auto",
        autoscale: true,
        autoDimensions: true,
        width: 455,
        height: 495,
        titlePosition: "outside",
        onStart: function () {
            $("#fancybox-overlay").css({
                position: "fixed",
                overflow: "scroll"
            });
        },
        onClosed: onTrackLightboxClosed
    });


Imported raditaz.min.build File After:

    $("#album-art-anchor").fancybox({
        scrolling: "auto",
        autoscale: true,
        autoDimensions: true,
        width: 455,
        height: 495,
        titlePosition: "outside",
        onStart: function () {
            $("#fancybox-overlay").css({
                position: "fixed",
                overflow: "scroll"
            });
        },
        onClosed: onTrackLightboxClosed,

        // Below is added above is original.
        //
        beforeShow: function(){
            $('#totemStop').click();
        },
        afterClose: function(){
            $('#totemStart').click();
        },
        onComplete: function(){
           $.fancybox.center;
        }
    });

onComplete 在内容显示后立即触发，并且该函数使用 Fancybox API 将内容集中在视口中......但恕我直言，现在没有必要了，因为我们正在处理导致它的问题。我把它包括在内是为了确定，因为我无法重现失败的情况，但是这两个插件一起进行了测试，以确保这个答案有助于解决您的问题。

可以肯定的是，您始终可以在 setTimeout 中运行 $.fancybox.center; 以便在 Fancybox 稳定后触发：

setTimeout("$.fancybox.center;", 1000);

onStart 使用 overflow: "scroll" 会导致 Chrome 右侧出现空竖条。

附带说明，由于该网站正在开发中，除了带有 Firebug 插件的 Firefox，我将 HTML Validator Plugin 用于 Firefox。它在查看源 html 页面时突出显示错误并提供解决方案。例如，在主页上的第 389 行是未封闭的类名称。第 587/589 行是重复的 ID。有些错误不是错误，比如插件将其独特的标签注入到标记中。

编辑： 根据您最近的 SO 问题编辑：请将 Fancybox 更新到与您正在使用的 jQuery v1.6.4 兼容的 v2.0。 Fancybox v2.0 源文件显示 jQuery v1.6.0 是最低要求版本。

如果有任何不清楚的地方，请告诉我，我会尝试以不同的方式解释。谢谢。

Answer 2

我也看不到你的网站。但是你可能可以删除所有 fancbox 的东西，重新下载并安装它。这将消除幻想箱中的问题。

否则，请检查您是否有一些代码不是针对fancybox，但无论如何都可以。

但首先，升级到更新的 jquery。您当前使用的是 1.6。现在有 1.7.2 可用。他们已经修复了新版本中的一些错误。