Question

Take a look at this fiddle.

Here is the most important markup:

$("div#images > img").click(function() {
    if ($(this).hasClass("active")) {
        $(this).fadeOut("fast").remove();    
        $("div#overlay").fadeOut("fast");
    }
    else {
        $(this).clone().addClass("active").appendTo("div#images");
        var marginL = -$("div#images > img.active").width() / 2;
        $("div#images > img.active").css("margin-left", marginL);

        $("div#overlay").fadeIn("fast");
    }
});​

What I want

When a user clicks an image, jQuery should clone that image and immediately open it up in a lightbox-style pop-up. (I do NOT want to use plugins for this.) This works fine. But, I also want that when a user clicks that cloned image that the image is removed and that the overlay fades out again. This doesn’t work at all.

Does anybody have any idea?

Thanks in advance.

Answer 1

Try this:

function hideClone() {
    $(this).fadeOut("fast").remove();
    $("#overlay").fadeOut("fast");
}

$("#images").on('click', 'img', function() {
    var $this = $(this),
        $div = $this.closest('div'),
        $clone = $this.clone(),
        marginL = $clone.width() / -2;
    $clone.addClass("active").css("margin-left", marginL).appendTo($div).on('click', hideClone);
    $("#overlay").fadeIn("fast");
});

Updated fiddle