JS Получить фоновое изображение, а затем отобразить в лайтбокс

Question

JS Получить фоновое изображение, а затем отобразить в лайтбокс

1

У меня есть набор div с фоном. Я пытаюсь получить изображение onclick затем отобразить его в лайтбокс. Когда появляется лайтбокс, изображение становится неопределенным. Я могу правильно отобразить URL-адрес изображения через консоль. Я знаю lbImg.src= galImg.src; неверно, но я не уверен, как его исправить.

HTML

<div id="lightbox">
    <span class="closeBTN">&times;</span>

    <img class="lbContent" src="">
 </div>

<div class="imgCon">

</div>

CSS

.imgCon
{
 height: 500px;
 width: 15%;
 min-width: 200px;
 background-image: url(../images/01.jpg);
 background-position: center;
 background-size: auto 500px;
 margin-bottom: 66px;
}

JS

var lightbox = document.querySelector('#lightbox')
    img = document.querySelector('.imgCon')
    span = document.querySelector('.closeBTN')
    lbImg = document.querySelector('.lbContent')

img.onclick = (function(){
    lightbox.style.display = "block";
    var galImg = window.getComputedStyle(this, 
    null).getPropertyValue("background-Image");
    lbImg.src = galImg.src;
    //console.log(galImg);
})

span.onclick = (function(){
    lightbox.style.display = "none";

});

Hfee 07 янв. 2018, в 05:43

Источник

0

что такое "imgCon" ?? Пожалуйста, отправьте полный код
Sabith 07 янв. 2018, в 03:56
0

imgcon - это просто контейнер изображений.
Hfee 07 янв. 2018, в 04:12

Теги:

javascript

2 ответа

0

Не могли бы вы попробовать lbImg.setAttribute('src', galImg.src).

Krasimir 07 янв. 2018, в 01:46

1

Это дает мне тот же результат.
Hfee 07 янв. 2018, в 04:06

Ещё вопросы

что такое "imgCon" ?? Пожалуйста, отправьте полный код
imgcon - это просто контейнер изображений.

S.Serpooshan · Accepted Answer · 2018-01-07T03-09-00.000Z

Вы сами получаете фоновое изображение в galImg, поэтому вам нужно установить его напрямую (это строка и не имеет свойства .src).

Но значение galImg, которое мы получаем из getComputedStyle, представляет собой строку, например: "url("file:.../Desktop/1.png")". Нам нужно удалить url( часть, а также кавычки ("...") из него:

lbImg.src = galImg.slice(4, -1).replace(/"/g, "");