0

クライアントの画像をビューアに大きな形式で表示するモーダルを作成しています。左にスライドし、クリックすると新しい画像が左からスライドインします。ページのサムネイルをクリックすると、モーダルに完全に表示されます。しかし、最初のモーダル表示画像をクリックすると、null が返され、左の設定がオフになります。しかし、新しい画像をクリックすると、すべてがうまくいき、そこから完全に機能します。null を返す理由と、停止する方法を教えてください。

コード

  $( '#modal img').live('click',function(e){
    var index = $(this).attr('img_index');
    var img_og = $( '#viewer ul li img[img_index="' + index + '"] ');
    var imgOgWidth= img_og.width();
    index++;
    if(index > $( '#viewer ul li img').length ) {index = 0;}
    var left = ($( window ).width() - imgOgWidth  )/ 2;
    var src = img_og.attr('src');
    console.log($( window ).width() + " - " + img_og.width() + " = " + left);
    $(this).animate({"left":'-2000px'},300,function(){
        $(this).attr({'src':src,'img_index':index}).css({'width':imgOgWidth,"left":'2000px'}).animate({'left':left},300);
    });
});

コンソールログ

1288 - null = 644
1288 - 470 = 409
1288 - 900 = 194
1288 - 900 = 194
1288 - 900 = 194

HTML

<div id="modal" class="none">
<img src="" img_index="" />
</div>
4

1 に答える 1

0

問題を解決しました。インデックスをインクリメントする前に「新しい」画像にアクセスしようとしていました。ご協力ありがとうございました。

于 2012-10-04T08:08:04.830 に答える