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