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图片库 - 将图片附加到灯箱以进行全屏预览

1 个答案: