Image duplicating
Image duplicating
I'm having this problem with a lightbox type function when I click images on my website. I'm not using the lightbox plugin, but a similar script I found on a blog [i'd source it but can't find it at the moment]. What's happening is that [seemingly random] it will display two instances of the image when I only single click on it.
Code:
$(".enlarge").bind("click", function(){
$("#display > img").each(function(){
$(this).remove();
});
$("#display").show();
var file = $(this).attr("src").replace(".png", "-lg.png");
var img = new Image();
$(img)
.load(function(){
$(this).hide();
$("#display").removeClass('loading').append(this);
$(this).animate({
'opacity' : 'show'
}, { 'duration' : 2000 });
})
.attr('id', file)
.attr('src', file);
});//close Enlarge Image
Basically I'm removing any <img> tags that may already in the 'display' element. Then I'm adding an <img> element whose src attribute is the image file that was clicked on. It should only be creating one image, but for some reason [seemingly random] it puts two in there.
Any insight would be greatly appreciated.