Image en quelque sorte charge deux fois

Question

Il semble que je continue de trébucher sur des problèmes étranges. Je travaille sur une sorte de lightbox vraiment simple, mais maintenant une image se charge deux fois. Je ne sais pas si c'est à cause de l'image centrale ou parce qu'elle est étirée (alors que le reste ne l'est pas) mais ça ne marche pas comme il se doit.

I cette 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 et trois ont une dimension de 800 x 553 tandis que l'image 2 a une dimension de 400 x 600

I exécuter ce 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("<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); 
    }); 
}); 
}); 

La première et la dernière image fonctionnent correctement. Si je clique sur le lien, il alerte l'URL de l'image appropriée, mais celui du milieu ne fait rien quand je clique sur le lien et en quelque sorte il charge 2 images (capture d'écran (les barres rouges sont juste pour vérifier si le lien est réellement là))

Quelqu'un peut-il voir ce qui se passe mal ici?

Answer 1

Est-ce juste moi ou y at-il deux étiquettes d'image dans cette ligne?

$("#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>"); 

Answer 2

Hmm .. Je l'ai compris.

Si j'ajoute $(".imageNavLink").css({height:this.height+'px'}); en dessous de la dernière image, cela fonctionne. Encore est bizarre pour moi pourquoi c'est seulement nécessaire à la dernière image ...