Галерея изображений JS - добавление изображения в лайт-бокс для полноэкранного предварительного просмотра

Question

Я создал галерею изображений и хочу, чтобы пользователи могли нажимать на основное изображение, чтобы получить полноэкранный предварительный просмотр.

Что я сделал, так это получил элемент изображения и добавил его в свой блок лайтбокса.который полупрозрачен, например так:

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