3

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

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

该站点是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 的修复程序。

4

2 回答 2

6

我访问了您的网页,并且在发现错误后能够反复重现该问题,那是使用 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 将内容集中在视口中......但恕我直言,现在没有必要,因为我们正在处理导致它的问题。我把它包括在内是为了确定,因为我最终无法重现失败的情况,但是这两个插件一起进行了测试,以确保这个答案有助于解决您的问题。

可以肯定的是,你总是可以运行$.fancybox.center; 在 setTimeout 中,以便在 Fancybox 稳定后触发:

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


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

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

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

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

于 2012-05-31T10:04:44.270 回答
0

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

否则,请检查您是否有一些并非针对fancybox 的代码,但无论如何。

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

于 2012-05-31T09:44:34.217 回答