Image somehow loads twice

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.

I have this html

<ul>
 <li><a href="largeImage1.jpg" class="box"><img src="smallImage1.jpg" id="image1"></a></li>
 <li><a href="largeImage2.jpg" class="box"><img src="smallImage2.jpg" id="image1"></a></li>
 <li><a href="largeImage3.jpg" class="box"><img src="smallImage3.jpg" id="image1"></a></li>
</ul>

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

I run this 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).开发者_StackOverflow中文版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("<div id='imageSelectPrevious'><a href='#' class='imageNavLink' title='"+prevImage+"'>Previous</a></div><img src='"+image+"' style='margin:0'></div>");
   $("#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("<div id='imageSelectNext'><a href='#' class='imageNavLink' title='"+nextImage+"'>Next</a></div><img src='"+image+"' style='margin:0'></div>");
   $("#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("<div id='imageSelectPrevious'><a href='#' class='imageNavLink' title='"+prevImage+"'>Previous</a></div><div id='imageSelectNext'><a href='#' class='imageNavLink' title='"+nextImage+"'>Next</a></div><img src='"+image+"' style='margin:0'></div><img src='"+image+"' style='margin:0'></div>");
   $("#imageSelectPrevious").add($("#imageSelectNext"),$(".imageNavLink")).css({height:this.height+'px',background:'red'}); 
  }

  $(".imageNavLink").click(function(event){
   event.preventDefault();
   alert(this.title);
  });
 });
});

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))

Can anybody see what's going wrong here?

Is it just me or are there two image tags in this line?

   $("#content").css({width:newWidth+'px',height:newHeight+'px',margin:'0'})
       .html("<div id='imageSelectPrevious'><a href='#' class='imageNavLink' title='"+prevImage+"'>Previous</a></div><div id='imageSelectNext'><a href='#' class='imageNavLink' title='"+nextImage+"'>Next</a></div><img src='"+image+"' style='margin:0'></div><img src='"+image+"' style='margin:0'></div>");

Hmm.. I got it.

If i add $(".imageNavLink").css({height:this.height+'px'}); extra below the last image it works. Still is weird to me why this is only necessary at the last image...