我访问了您的网页,并且在发现错误后能够反复重现该问题,那是使用 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 是最低要求版本。
如果有任何不清楚的地方,请告诉我,我会尝试以不同的方式解释。谢谢。