Что на самом деле произошло : Lightbox, изображение не загружает
Я очень новичок во всех видах программирования, поэтому я очень запутался
, что мне сказали, что мне нужно, чтобы я не знаю, что я не знаю, что я не знаю. Пример
Вот и веб-сайт, где это сломано: https://teddydemonenjoyer.neocities.org/zchar_syalis
минимальный воспроизводимый пример на коде: https://codepen.io/teddy-demon-enjoyer/ ... pgbbrberbe /> html: < /p>
Код: Выделить всё
Minimal Reproducible Example
[img]https://cdn.pixabay.com/photo/2016/11/30/20/58/programming-1873854_960_720.png[/img]
[img]https://media.istockphoto.com/id/1047259374/photo/programming-source-code-abstract-background.webp?s=2048x2048&w=is&k=20&c=JjAc-lnJXIFeH3Jb25ICSEseUHeGfToOleoJpiHjLGA=[/img]
< /code>
css: < /p>
#lightbox {
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: none;
}
#lightbox.active {
display: flex;
justify-content: center;
align-items: center;
}
#lightbox img {
max-width: 90%;
max-height: 80%;
padding: 4px;
background-color: linear-gradient(180deg, #251047 15%, rgba(95, 47, 125, 1) 75%, rgba(139, 58, 171, 1) 100%);
border: 1px dotted white;
}
< /code>
js: < /p>
const lightbox = document.createElement('div')
lightbox.id = 'lightbox'
document.body.appendChild(lightbox)
const images = document.querySelectorAll('img')
images.forEach(Image => {
Image.addEventListener('click', e => {
lightbox.classList.add('active')
const img = document.createElement('img')
img.src = images.src
while (lightbox.firstChild) {
lightbox.removeChild(lightbox.firstChild)
}
lightbox.appendChild(img)
})
})
lightbox.addEventListener('click', e => {
if (e.target !== e.currentTarget) return
lightbox.classList.remove('active')
})
Подробнее здесь: https://stackoverflow.com/questions/796 ... ot-loading
Мобильная версия