JS 图片库 - 将图片附加到灯箱以进行全屏预览

Question

我已经建立了一个图片库，希望允许用户点击主图获得全屏预览。

我所做的是获取图像元素并将其附加到半透明的灯箱 div，如下所示：

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);
}

有没有办法在不从屏幕上删除原始元素的情况下执行此操作？实际上，它会从页面中删除图像，然后将其添加到灯箱中。由于灯箱是半透明的，用户在灯箱后面看到的内容都被删除了，因为元素被删除了。

Answer 1

为了解决这个问题，我所做的是创建一个新元素并获取原始图像 src 并将其设置为新创建元素的属性。

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);
}

JS 图片库 - 将图片附加到灯箱以进行全屏预览

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

javascript

image-gallery

appendchild