Trying to create a test page following a tutorial to get a lightbox test page up and running, before adding it to my regular site. Followed the tutorial on this (https://www.youtube.com/watch?v=uKVVSwXdLr0) but the steps along the way aren't working.
Could use some help as nothing seems to be working and have been spinning over and over retrying things. The grid works fine, images are loading, but there's no lightbox showing on the screen at all. And oddly the while the rest of the css works, the pointer doesn't show either 🤷🏻♂️. Thanks.
HTML Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<meta http-equiv="x-UA-Compatable" content="ie=edge">
<title>New Test Page</title>
<script defer src="/scripts/lightbox.js"></script>
<script src="/styles/testing.css"></script>
</head>
<body>
<div class="group">
<!--Add Image-->
<img src="/Images/javier-power.jpg" alt="" width="200" height="200">
<img src="/Images/javier-power.jpg" alt="" width="200" height="200">
<img src="/Images/javier-power.jpg" alt="" width="200" height="200">
<img src="/Images/javier-power.jpg" alt="" width="200" height="200">
<img src="/Images/javier-power.jpg" alt="" width="200" height="200">
<img src="/Images/javier-power.jpg" alt="" width="200" height="200">
<img src="Images/javier-power.jpg" alt="" width="200" height="200">
<img src="Images/javier-power.jpg" alt="" width="200" height="200">
<img src="Images/javier-power.jpg" alt="" width="200" height="200">
</div>
</body>
</html>
CSS Page
body{
margin: 0;
}
.group{
display: grid;
grid-template-columns: repeat( 3, 200px);
align-items: center;
justify-content: center;
align-content: center;
grid-gap: 4rem;
height: 100vh;
}
.group img{
width: 200px;
height: 200px;
cursor: pointer;
}
#lightbox {
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
display: none;
}
#lightbox.active{
display: flex;
justify-content: center;
align-items: center;
}
// Lightbox test
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 = img.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')
})
Answer
It looks like you're using inconsistent capitalization in your JavaScript, so change Lightbox to lightbox throughout. Also, update the line img.src = img.src to img.src = e.target.src to correctly display the clicked image in the lightbox.