2012-05-13 8 views
0

jQueryスクリプトが最初の読み込み時に正しく読み込まれる(ナビゲーションリンクをクリックする)のを理解するのに苦労していますが、ブラウザで「更新」を押すと失敗します。jQuery.Cycle Offsets画像特定の更新時

流体レイアウト内でフルサイズで中央に配置された一連のイメージを循環させる簡単なスクリプトです。読み込まれると、スクリプトは画面上に画像を中央に置くように、画像に対して適切な余白を設定する必要があります。ナビゲーション内のリンクをクリックすると、動作するように見えます。ページをリフレッシュすると、スクリプトは失敗し、画像に余白を残します。これは、写真を画面の横にオフセットします。

ここではスライドショーを見ることができます。ページを更新してから、ナビゲーション内の青色の「tiburon residence」リンクをクリックすることでエラーを再現できるはずです。 (スクリーンショット:http://imgur.com/a/z2hki)は

http://dev.christinerode.com/garyhutton/tiburon.html

私は私のスクリプトやCSS含み、同様の機能の順序を変更しようとしましたが、私は運がありませんよ。なぜこれは特定のリフレッシュでのみ起こるのでしょうか?

jquery.cycleプラグインを使用していますが、他の出現箇所は見つかりません。同じコードの異なる表示をトリガするためにJavaScriptで何が起こっていますか?

+0

それが唯一のケースではありません。もう1つのバグは、誰かが「次へ」ボタンを速くクリックすると起こるということです。 –

+0

そして、私は 'tiburon'をクリックする必要もなく、場合によっては問題があります。CTRL + F5を数回押してみてください。 –

答えて

0

提案のカップル:ALLスクリプト</body>タグの前に

場所。

<script> // jquery // </script> 
    <script> // cycle.plugin </script> 
    <script> // your jQ functions // </script> 

</body> 

あなたのスライドがギャラリーをアニメーション化されながらクリックを防ぐためにアニメーション化されているかどうかを確認するためにifステートメントを追加できるより:あなたは文書が行わ計測あなたのDOM要素の大きさの前にロードされていることを確認してくださいその方法

$("#slide_prev").click(function(){ 
    if(!($('.slideshow img').is(':animated'))){ 
     $('.slideshow').cycle("previous"); 
    } 
}); 
$("#slide_next").click(function(){ 
    if(!($('.slideshow img').is(':animated'))){ 
     $('.slideshow').cycle("next"); 
    } 
}); 

これは私のコメントであなたのの質問の問題を防ぐことができます。

それでもエラーが発生している場合(私は示唆していない何をしかし、あなたが試すことができますです):

$(window).load(function(){ 
    // your functions 
}); 
+0

ありがとう、六子よ!タグの前にすべてのjavascriptを移動するのは残念ながらうまくいきませんでした。しかし、 '$(window).load(function(){')のすべてをラップすることは完全に機能しているように見えますが、それを保つだけの欠点は何ですか? – Christine

関連する問題