私はあなたのウェブページにアクセスし、バグを見つけたら問題を繰り返し再現することができました。それはFirefoxを使用していました。
まず、この問題の参照写真を次に示します。
上の画像では、Fancyboxがブラウザの中央に配置されておらず、アーティストの写真の上部が、使用しているTotemTickerプラグインのすぐ下にあることに注意してください。
次の参照写真は、トーテムティッカーがオブジェクトをオーバーレイしていることを示す赤い枠で囲まれたセクションのクローズアップです。
これらの2つの問題は関連しています。FancyBoxの開きがページの問題で低すぎる場合は、数曲前に再生された中央の大きな画像の横にあるミニアーティスト画像をクリックする必要があります。トーテムティッカープラグインはアニメーション処理中です。
これらの参照画像は、タイミングが適切な場合に何が起こるかを示しています。タイミングが正しくない場合、またはスライダーがまだクリアされていないキャッシュ内の画像を使用している場合は、再試行する必要があります。通常、トーテムティッカーが他のオブジェクトと重なっているのがわかります。
バグが見つかったので、これを解決するための実用的なソリューションを次に示します。Fancyboxプラグインのコールバックを使用して、Fancyboxがアニメーション化しようとしているときにトーテムティッカーをオフにし、Fancyboxが閉じたときにトーテムティッカーをオンに戻します。
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を使用してコンテンツをビューポートの中央に配置します...しかし、これは、原因となる問題を処理しているため、現在は必要ありません。私は自分の側で失敗した状態を再現できないので、確かにそれを含めましたが、この答えがあなたの問題に対処するのに役立つことを確認するために、2つのプラグインが一緒にテストされました。
確かに、いつでも$.fancybox.centerを実行できます。Fancyboxが安定した後に起動するようにsetTimeoutで：
setTimeout("$.fancybox.center;", 1000);
onStartを使用するとoverflow: "scroll"、Chromeの右側に空の垂直バーが表示されます。
ちなみに、このサイトは開発中であるため、Firefoxプラグインを備えたFirefoxの他に、Firefox用のHTMLバリデータープラグインを使用しました。ソースhtmlページを表示するときのエラーを強調表示し、解決策を提供します。たとえば、ホームページの389行目は閉じられていないクラス名です。587/589行目にはIDが重複しています。プラグインが独自のタグをマークアップに挿入する場合など、一部のエラーはエラーではありません。
編集：最近のSO質問編集：使用しているjQueryv1.6.4と互換性のあるv2.0にFancyboxを更新してください。Fancybox v2.0のソースファイルには、jQueryv1.6.0が最低限必要なバージョンであると記載されています。
不明な点がありましたらお知らせください。別の方法で説明させていただきます。ありがとう。