Picture won't open when clicked on

HTML-CSS
1

I can’t get my image gallery to open and I don’t know why.
I should hav e a pop-up with the picture enlarged and possibility to close with cross:

2023-03-03_10h40_59
2023-03-03_10h40_591860×655 160 KB 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>AluToye</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equip="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="Style.css">
  <meta charset="UTF-8">
</head>

<body>
<div class="container">
<h1>image gallery</h1>
  <div class="image-container">
    <div class="image"><img src="pictures/Bioboerderij/image00015.jpeg"></div>
    <div class="image"><img src="pictures/Tandartsenpraktijk Glazuur/DSY-0004.jpg"></div>
    <div class="image"><img src="pictures/Tandartsenpraktijk Glazuur/DSY-0004.jpg"></div>
    <div class="image"><img src="pictures/Tandartsenpraktijk Glazuur/DSY-0004.jpg"></div>
    <div class="image"><img src="pictures/Tandartsenpraktijk Glazuur/DSY-0004.jpg"></div>
    <div class="image"><img src="pictures/Tandartsenpraktijk Glazuur/DSY-0004.jpg"></div>
</div>
</div>

<div class="popup-image">
  <span>&times;</span>
  <div class="image"><img src="pictures/Bioboerderij/image00015.jpeg"></div>
</div>

</div>

<script>
    document.queryselectorAll('image-container img').forEach(image=>{
  image.onclick = () =>{
  document.queryselector('.popup-image').style.display ='block';
  document.queryselector('.popup-image img').src = image.getAttribute('src');
  }
  });

  document.querySelector('popup-image span').onclick =() =>{
    document.queryselector('.popup-image').style.display ='none';

  }
</script>

</body>
</html>
  • {
    margin: 0; padding: 0;
    box-sizing: border-box;

}

.container {
position: relative;
min-height: 100vh;
background: #ddd;
}

.container h1 {
font-size: 40px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: normal;
padding: 15px;
color: white;
text-transform: capitalize;
text-align: center;

}

.container .image-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
padding: 10px;
}

.container .image-container .image {
height: 250px;
width: 350px;
border: 10px solid white;
box-shadow: 0 5px 15px rgba(0,0,0.1);
overflow: hidden;
cursor: pointer;
}

.container .image-container .image img {
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}

.container .image-container .image:hover img {
transform: scale(1.1);

}

.container .popup-image {
position: fixed;
top:0; left:0;
background: rgba(0,0,0,.9);
height: 100%;
width: 100%;
z-index:100;
display: none;
}

.container .popup-image span{
position: absolute;
top: 0; right: 10px;
font-size: 40px;
font-weight: bolder;
color: white;
cursor: pointer;
z-index: 100;
}

.container .popup-image img{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
border: 5px solid white;
border-radius: 5px;
width: 750px;
object-fit: cover;
}

@media (max-width: 768px){
.container .popup-image img {
width: 95%;
}
}

2

Check this line. “equip” is not a valid word here.

Is your index.html file stored in the same folder as the ‘pictures’ subfolder?
If it is, change the following:

  • querySelectorAll and querySelector are not written correctly. Change the letter “s” to the capital letter shown here.
3

:frowning: i, thanks for noticing,
but that’s not the solution :frowning: