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插件下面.

下一张参考照片是红色框架部分的特写,显示图腾标签正在覆盖物体:

这两个问题是相关的.要重现FancyBox在页面问题上打开得太低,您需要点击播放几首歌曲的居中较大图像旁边的迷你艺术家图像,同时Totem Ticker插件正处于动画制作过程中.

这些参考图像显示了时机正确时会发生什么.如果时间不正确或滑块使用尚未清除的缓存中的图像,则需要再次尝试.通常你会开始看到Totem Ticker与其他物体重叠.

现在找到了bug,这是一个可行的解决方案来处理它.您将在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右侧的空垂直条.

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

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

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