javascript returns null on first click only
<p>I am making a modal that displays images for the client to viewer in larger form. and slides left and then slides the new image in from the left on click. When I click on the thumbnail on the page it is displays in the modal perfectly. But when I click on the first modal displaying image it returns null and the left settings is off. but when I click on the new image all is well and works perfectly from there on out. Why does it return null and how do I stop it.</p>

<p><em><strong>CODE</em></strong></p>

<pre><code>  $( '#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 &gt; $( '#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);
    });
});
</code></pre>

<p><em><strong>CONSOLE.LOG</em></strong></p>

<pre><code>1288 - null = 644
1288 - 470 = 409
1288 - 900 = 194
1288 - 900 = 194
1288 - 900 = 194
</code></pre>

<p><em><strong>HTML</em></strong></p>

<pre><code>&lt;div id="modal" class="none"&gt;
&lt;img src="" img_index="" /&gt;
&lt;/div&gt;
</code></pre>
