FancyBox在页面上打开太低

Question

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

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

该网站为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 下方。

下一张参考照片是红色框架部分的特写，显示 Totem Ticker 正在覆盖物体：

这些两个问题是相关的。要重现 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"使用{{1}}会导致Chrome右侧的空竖条。

自从该网站正在开发以来，除了Firefox和Firebug插件之外，我还使用了HTML Validator Plugin用于Firefox。它在查看源html页面时突出显示错误并提供解决方案。例如，在主页上，线389是未闭合的类名。第587/589行是重复的ID。有些错误不是错误，例如当插件将其唯一标记注入标记时。

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

如果有什么不清楚请告诉我，我会尝试不同的解释。感谢。

Answer 2

我也看不到你的网站。但你可以删除所有的fancbox东西，再次下载并安装它。这将消除fancybox中的问题。

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

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