При нажатии на галерею изображений, должно всплывать фото в отдельном окне , но почему то при нажатии происходит ошибка ERR_FILE_NOT_FOUND
<div class="container-gallery">
<div class="gallery">
<div class="gallary-item">
<div class="gallary-icon">
<img src="./imagesAuto/rapid3.jpg" width="220" height="162">
</div>
</div>
<div class="gallary-item">
<div class="gallary-icon">
<img src="./imagesAuto/rapid4.jpg" width="220" height="162">
</div>
</div>
<div class="gallary-item">
<div class="gallary-icon">
<img src="./imagesAuto/rapid5.jpg" width="220" height="162">
</div>
</div>
<div class="gallary-item">
<div class="gallary-icon">
<img src="./imagesAuto/rapid6.jpg" width="220" height="162">
</div>
</div>
<div class="gallary-item">
<div class="gallary-icon">
<img src="./imagesAuto/rapid2.jpg" width="220" height="162">
</div>
</div>
<div class="gallary-item">
<div class="gallary-icon">
<img src="./imagesAuto/rapid7.jpg" width="220" height="162">
</div>
</div>
<div class="gallary-item">
<div class="gallary-icon">
<img src="./imagesAuto/rapid8.jpg" width="220" height="162">
</div>
</div>
<div class="gallary-item">
<div class="gallary-icon">
<img src="./imagesAuto/rapid9.jpg" width="220" height="162">
</div>
</div>
<div class="gallary-item">
<div class="gallary-icon">
<img src="./imagesAuto/rapid10.jpg" width="220" height="162">
</div>
</div>
</div>
<div class="pop-up">
<span>×</span>
<img src="./imagesAuto/rapid8.jpg">
</div>
</div>
css
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto
}
.gallery .gallary-item {
width: 32% !important;
float: none !important;
margin: 0 0 14px !important;
}
.container-gallery .pop-up{
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
display: none;
}
.container-gallery .pop-up img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50% );
}
.container-gallery .pop-up span{
position: fixed;
top: 10px;
right: 20px;
width: 40px;
height: 40px;
background: #fff;
font-size: 50px;
font-weight: 900;
text-align: center;
line-height: 40px;
border-radius: 50%;
cursor: pointer;
}
.gallery .gallary-item img {
display: block;
width: 100%;
border: none !important;
border-radius: 4px;
box-shadow: none;
transition: all .2s ease-in-out;
}
js
document.querySelectorAll('.container-gallery .gallary-icon').forEach(img =>{
img.onclick = () => {
document.querySelector('.pop-up'). style.display = "block";
document.querySelector(".pop-up img"). src = img.getAttribute('src');
}
});
document.querySelector('.pop-up span').onclick = () => {
document.querySelector('.pop-up'). style.display = "none";
}