2012-01-14 4 views
1

スライドの効果を持ついくつかのアルバムからなる横の画像ギャラリーで作業しますが、左または右にスライドしたいときにはうまくいきません。約1400px以上で正しく表示されます。横スライド効果のある画像ギャラリー - 1400ピクセルを超えるスライド後のバグ

私はそれが10000px以上のバグになる可能性があると読んでいます。

私のHTMLコードは非常に基本的なものです。 imgタグを含むすべてのli要素との順序付けられていないリストul。いくつかのリは、アルバムの名前を持つ特別な「id」属性を持っています(私の現在のコードは、7枚のアルバムと80px幅のサムネイル約80枚で構成されています)。 アルバム名(ギャラリーの下にナビゲーションとして表示されます)をクリックして、すべてのギャラリー画像をスライドさせてこの対応するアルバムの最初の画像をこの例の正確な位置に表示したいと考えています0px(スクリーン)。

のjQuery:

$('ul#fp_galleryList li').click(function(){ 
    //get old index of the element click previously 
    var old_index = $('ul#fp_galleryList li').find('.active').parent('li').index(); 

    //get index of the element clicked 
    var clicked_index = $(this).index(); 

    //find gallery name href associate to this li 
    var gallery_name = $(this).find('a:first').attr('href'); 

    //find left position in px of the first image of the clicked gallery 
    var offset = $(gallery_name).offset(); 
    var current_left = Math.ab(offset.left); 

    //if statement to find if we need to scroll to the right or left 
    if(old_index < clicked_index) 
    { 
    //scroll to left 
    $('ul.container').animate({'left': '-='+ current_left},'fast');  
    }else{ 
    //scroll to right 
    $('ul.container').animate({'left': '+='+ current_left},'fast'); 
    } 
}) 

私はアルバムをクリックし、スライダーを移動しなければならないどのように多くのピクセルからではなく、周りの後に右であるように思われません見つける何の問題を持っていない//クリック李galleryListイベントに 一度に1400ピクセル。

私が欲しいものを達成する良い方法があるのでしょうか、私はどこかで間違いを犯しましたか? ご協力ありがとう

+0

私はあなたが 'Math.abs'以上ない' Math.ab'を意味推測していますか? – Mottie

答えて

1

10,000ピクセルの問題は、バージョン1.5.3で修正されたbug in jQueryバージョン1.4.3+です。

jQueryを更新するだけで済みますが、最新のバージョンを使用することをおすすめします。


アップデート:このコード(demo)を試してみてください。

//on click li galleryList event 
$('ul#fp_galleryList li').click(function() { 
    //get old index of the element click previously 
    var old_index = $('ul#fp_galleryList li').find('.active').parent('li').index(); 

    //remove active to all and add on the element clicked 
    $('ul#fp_galleryList li a').removeClass('active'); 
    $(this).find('a:first').addClass('active'); 

    //find index of the href associate to this li 
    var gallery_name = $(this).find('a:first').attr('href'); 
    var gallery_index = $(gallery_name).index(); 

    //find left position in px of the first image of the clicked gallery 
    var pos = $(gallery_name).position(); 

    //if statement to find if we need to scroll to the right or left 
    //scroll to left 
    $('ul.container').animate({ 
     'left': -pos.left + 2 // add two so you can see the line 
    }, 'fast'); 

}); 
+0

はい、これは私が思ったものですが、とにかく私にはこれが起こっているとは言いません。私はjqueryの最後のバージョンをアップロードしています。私は10000pxのアニメーションから遠く離れています。これは本当に私を迷惑にしているのですが、なぜ私のコードがバグか分かりません。私は確かに間違って何かをしているが、何が質問です。 – user1149497

+0

jsFiddle.netを使用してデモを共有した場合、トラブルシューティングを手助けするのが簡単になります。 – Mottie

+0

私はそれをhttp://jsfiddle.net/9Pp3f/3/ – user1149497

関連する問題