Home/ Questions/Q 1113727
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T02:54:01+00:00

It seems i keep stumbling upon strange problems. I’m working on a sort of

  • 0

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

alt text

Can anybody see what’s going wrong here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>");
    • 0