Search code examples
javascriptimage-galleryappendchild

JS image gallery - appending image to light-box for full-screen preview

I have built an image gallery and want to allow users to click on the main image to get a full screen preview.

What I've done is get the image element and append it to my lightbox div which is semi-transparent, like so:

function get_image_preview(){
    var lightboxBG = document.getElementById("product_preview");
    var image_preview = document.getElementById("gallery_main_image");
    lightboxBG.style.display = "block";
    lightboxBG.appendChild(image_preview);
}

Is there a way to do this that isn't going to remove the original element from the screen? As it is it removes the image from the page and then adds it to the lightbox. As the lightbox is semi-transparent what users are seeing behind it is all messed up because the element was removed.

Solution

  • What I did to get around this is create a new Element and get the original image src and set that as an attribute for the newly created element.

    function get_image_preview(){
    var lightboxBG = document.getElementById("product_preview");
    var image_src = document.getElementById("gallery_main_image").src;
    lightboxBG.style.display = "block";
    var new_image = document.createElement("img");
    new_image.setAttribute("id", "preview_image");
    new_image.setAttribute("src", image_src);
    lightboxBG.appendChild(new_image);
}