Reputation: 85
I have a jquery lightbox but the navigation doesn't work well. I added the lightbox with append function to the body tag, but when I click on the next arrow the lightbox added to the body tag multiplied. At first I can see the next item, but after that I got the 4th one. I got this line: 1,2,4,8,16.
What has to be changed in the function that lightbox div added only once to body tag?
$(document).ready(function() {
var item, img, large_img, imgtag;
var doc = $(document);
$("#lightbox li").click(function() {
item = $(this);
img = item.find("img");
large_img = new Image();
large_img.src = img.attr("data-large") ? img.attr("data-large") : img.attr("src");
$("#lightbox li.active").removeClass("active");
item.addClass("active");
var gallery = '<div class="gallery"><span class="galleryclose"></span><div class="gallerycontent"><div class="galleryimg">' + large_img + '</div></div></div>';
var controls = '<span class="previmg"></span><span class="nextimg"></span>';
$(gallery).appendTo("body");
$(large_img).load(function() {
$(".gallerycontent").html(function() {
imgtag = '<div class="galleryimg"><img src="' + large_img.src + '" style="opacity: 0; " /><span class="previmg"></span><span class="nextimg"></span></div>';
$(".gallerycontent").html(imgtag);
$(".gallerycontent img").fadeTo(600, 1);
})
})
doc.on("click", ".previmg", function() {navigate(-1)});
doc.on("click", ".nextimg", function() {navigate(1)});
doc.on("click", ".galleryclose", function(){ navigate(0) });
function navigate(direction){
if (direction == -1){
$("#lightbox li.active").prev().trigger("click");
}
else if (direction == 1){
$("#lightbox li.active").next().trigger("click");
}
else if (direction == 0){
$("#lightbox li.active").removeClass("active");
$(".gallery").fadeOut(300, function() { $(this).remove(); });
}
}
})
});
Upvotes: 0
Views: 129
Reputation: 207501
Every time you click on the li, you add more click events to all the elements.
That is why it is a bad idea to add click events inside of click events.
Upvotes: 1
Reputation: 1967
.append()
will keep adding elements every time it runs. You need to remove()
the old element before appending a new one.
Do this:
$('.gallery').remove(); // add this line
var gallery = '<div class="gallery"><span class="galleryclose"></span><div class="gallerycontent"><div class="galleryimg">' + large_img + '</div></div></div>';
var controls = '<span class="previmg"></span><span class="nextimg"></span>';
$(gallery).appendTo("body");
Upvotes: 1