Image somehow loads twice
<p>It seems i keep stumbling upon strange problems. I'm working on a sort of really simple lightbox thing, but now an image loads twice. I don't know if it's because of it is the center image or because it is stretched (while the rest isn't) but it don't work as it should.</p>

<p>I have this html</p>

<pre><code>
&lt;ul&gt;
 &lt;li&gt;&lt;a href="largeImage1.jpg" class="box"&gt;&lt;img src="smallImage1.jpg" id="image1"&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="largeImage2.jpg" class="box"&gt;&lt;img src="smallImage2.jpg" id="image1"&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="largeImage3.jpg" class="box"&gt;&lt;img src="smallImage3.jpg" id="image1"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Image 1 and three have a dimension of 800 x 553 while image 2 has a dimension of 400 x 600</p>

<p>I run this code</p>

<pre><code>
$("a").click(function(event){
 $("#shadow").add($("#shadowContent"),$("#closeBox"),$("#imageSelectPrevious"),$("#imageSelectNext"),$("#content")).remove();

 [..]

 var parentEl = $(this).closest("ul");
 var currPosition = $(this).parent().prevAll().length + 1;
 var totalItems = $("#"+$(parentEl).attr("id")+" li").length;
 var newImage = new Image();

 $(newImage).load(function(){
  newWidth = this.width, newHeight = this.height+35;

  [.. Load transparent background other necessary html elements ..]

  if(currPosition == totalItems){
   var prevImageParentList = currPosition - 1;
   var prevImage = $("#"+$(parentEl).attr("id")+" li:nth-child("+prevImageParentList+") a").attr("href");
   $("#content").css({width:newWidth+'px',height:newHeight+'px',margin:'0'}).html("&lt;div id='imageSelectPrevious'&gt;&lt;a href='#' class='imageNavLink' title='"+prevImage+"'&gt;Previous&lt;/a&gt;&lt;/div&gt;&lt;img src='"+image+"' style='margin:0'&gt;&lt;/div&gt;");
   $("#imageSelectPrevious").add($(".imageNavLink")).css({height:this.height+'px'}); 

  }else if(currPosition == 1){
   var nextImageParentList = currPosition + 1;
   var nextImage = $("#"+$(parentEl).attr("id")+" li:nth-child("+nextImageParentList+") a").attr("href");
   $("#content").css({width:newWidth+'px',height:newHeight+'px',margin:'0'}).html("&lt;div id='imageSelectNext'&gt;&lt;a href='#' class='imageNavLink' title='"+nextImage+"'&gt;Next&lt;/a&gt;&lt;/div&gt;&lt;img src='"+image+"' style='margin:0'&gt;&lt;/div&gt;");
   $("#imageSelectNext").add($(".imageNavLink")).css({height:this.height+'px'}); 

  }else{
   var prevImageParentList = currPosition - 1;
   var nextImageParentList = currPosition + 1;
   var prevImage = $("#"+$(parentEl).attr("id")+" li:nth-child("+prevImageParentList+") a").attr("href");
   var nextImage = $("#"+$(parentEl).attr("id")+" li:nth-child("+nextImageParentList+") a").attr("href");
   $("#content").css({width:newWidth+'px',height:newHeight+'px',margin:'0'}).html("&lt;div id='imageSelectPrevious'&gt;&lt;a href='#' class='imageNavLink' title='"+prevImage+"'&gt;Previous&lt;/a&gt;&lt;/div&gt;&lt;div id='imageSelectNext'&gt;&lt;a href='#' class='imageNavLink' title='"+nextImage+"'&gt;Next&lt;/a&gt;&lt;/div&gt;&lt;img src='"+image+"' style='margin:0'&gt;&lt;/div&gt;&lt;img src='"+image+"' style='margin:0'&gt;&lt;/div&gt;");
   $("#imageSelectPrevious").add($("#imageSelectNext"),$(".imageNavLink")).css({height:this.height+'px',background:'red'}); 
  }

  $(".imageNavLink").click(function(event){
   event.preventDefault();
   alert(this.title);
  });
 });
});
</code></pre>

<p>The first and last images are working fine. If i click the link it alerts the appropriate image url, but the middle one doesn't do anything when i click the link and somehow it loads 2 images (seen screenshot (the red bars are just to check if the link is actually there))</p>

<p><img src="http://i.stack.imgur.com/hSabS.png" alt="alt text"></p>

<p>Can anybody see what's going wrong here?</p>
