jQuery function runs too many times when clicked gallery more than once

Question

I'm making a image lightbox, there's only one thing I cannot get right. When you click on an gallery image for the first time, everythings working perfectly. But after closing the lightbox, and clicking again on the gallery, every image in the lightbox is shown as many times as you've clicked the gallery.

Sitting for hours now but can't figure it out..

Here's a working demo. This is the html markup:

<ul class="image_gallery">
    <li>
        <a href="http://route.ekonoom.nl/upload/6676295.jpg">
            <img src="http://route.ekonoom.nl/upload/6676295.jpg" title="foto1">
        </a>

    <li>
        <a href="http://thomasave.be:1234/lars/peer.jpg">
            <img src="http://thomasave.be:1234/lars/peer.jpg" title="foto2">
        </a>

    <li>
        <a href="http://public.media.smithsonianmag.com/legacy_blog/banana2.jpg">
            <img src="http://public.media.smithsonianmag.com/legacy_blog/banana2.jpg" title="foto3">
        </a>

</ul>

And here's the jQuery:

$('.image_gallery a').click(function(e) {

    e.preventDefault(); // Prevent opening new page

    var image_href = $(this).attr('href'),
        image_title = $(this).find('img').attr('title'),
        number_images = $('.image_gallery img').size(),
        current_image_number = parseInt( $(this).find('img').index('.image_gallery img') ) + 1,
        image_count = current_image_number + '/' + number_images;


    // If lightbox already exists, update and slide in
    if ($('.lightbox').length > 0) {
        updateLightbox();
        $('.lightbox, .lightbox_image, .controls').hide();
        $('.lightbox').slideDown();
        $('.controls').delay(400).slideDown();
        $('.lightbox_image').delay(800).fadeIn();
    }

    // If lightbox doesn't exist yet, create it
    else {
        var lightbox = 
        '<div class="lightbox">' +
            '<p>Click to close</p>' +
            '<div class="lightbox_image">' +
                '<img src="' + image_href +'" >' +
            '</div>' +
            '<div class="controls">' +
                '<div class="title">' + image_title + '</div>' +
                '<button class="prev">prev</button>' +
                '<span class="image_count">' + image_count + '</span>' +
                '<button class="next">next</button>' +
            '</div>' +
        '</div>';

        // Lightbox animates in
        $('body').append(lightbox);
        updateLightbox();
        $('.lightbox, .lightbox_image, .controls').hide();
        $('.lightbox').slideDown();
        $('.controls').delay(400).slideDown();
        $('.lightbox_image').delay(800).fadeIn();

        // Lightbox animates out
        $('.lightbox_image, .lightbox p').click(function() {
            $('.lightbox_image').fadeOut();
            $('.controls').delay(400).slideUp();
            $('.lightbox').delay(800).slideUp();
        });
    }


    // On click for prev/next image
    $('.lightbox button').click(function(){

        // On click for next image
        if ( $(this).hasClass('next')) {

            // Find next image and title
            image_href = $('.image_gallery a').eq(current_image_number).attr('href');
            image_title = $('.image_gallery img').eq(current_image_number).attr('title');

            // Update current image number
            current_image_number++;
            updateLightbox();
        };

        // On click for prev image
        if ( $(this).hasClass('prev')) {

            // Find prev image and title
            image_href = $('.image_gallery a').eq(current_image_number - 2).attr('href');
            image_title = $('.image_gallery img').eq(current_image_number - 2).attr('title');

            // Update current image number
            current_image_number--;
            updateLightbox();
        };
    });


    // Update lightbox
    function updateLightbox(){

        // Update .controls content
        var image_count = current_image_number + '/' + number_images;
        $('.image_count').html(image_count);
        $('.title').html(image_title);

        // If first or last image is clicked, disable associated control
        $('.prev, .next').removeAttr('disabled');
        if (current_image_number == 1) {
            $('.prev').attr('disabled', 'true');
        };
        if (current_image_number == number_images) {
            $('.next').attr('disabled', 'true');
        };

        // Make a fading transition
        $('.lightbox_image').fadeOut(300).fadeIn(300);
        setTimeout(function(){
            $('.lightbox_image').html('<img src="' + image_href + '" />');
        }, 300);
    };
});

Answer 1

You have to unbind the click events from the button. They get binded again and again.

       $('.lightbox button').unbind('click');

check this jsfiddle. http://jsfiddle.net/shinde87sagar/ZpVK2/1/