Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

Tell us what’s happening:

  1. When you click one of your .gallery-item elements, the .lightbox element’s display property should be set to flex to make .lightbox and the two elements within it visible.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lightbox Viewer</title>
<link href="styles.css">
  </head>

  <body>
<div class="gallery">
  <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" value="1">
  
  <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg">
<img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg
">
</div>
<div class="lightbox">
  <button id="close-btn">&times;
</button>
  <img src="" id="lightbox-image">
</div>
<script src="script.js"></script>
  </body>

</html>

/* file: styles.css */
body{
  margin:0;
  padding:0;

}
*{
  margin:0;
  padding:0;
}
.lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  /* display:hidden; */
  display:none;
  justify-content:center;
  align-items: center;
  background-size: cover;
  background:rgba(0,0,0,.3);
  cursor:pointer;
  
}

.lightbox button{
  position:absolute;
  background : transparent;
  color:#fff;
  font-weight:700;
  font-size:28px;
  cursor:pointer;
  width:30px;
  height:30px;
  border : none;
  top:0;
  right:0;

}
.gallery{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  
}
.gallery img{
  display:block;
  width:250px;
  height:300px;
  transform: scale(100%)
  cursor:pointer;
  /* padding:5rem; */
}
.gallery img:hover{
  transform:scale(110%);
  transition: transform .2s ease-in-out;
}
.lightbox img{
  
  width:800px;
  height:400px;
}

/* file: script.js */
const gallery=document.querySelector(".gallery");
const closeBtn=document.getElementById("close-btn");
const lightBox=document.querySelector(".lightbox");
const lightBoxImage=document.getElementById("lightbox-image");
console.log(gallery)
function displayItem(para){
  
  const thumbnail=para.src.replace("-thumbnail","");
  
  lightBox.style.display="flex";
  lightBoxImage.setAttribute("src",thumbnail);
}
gallery.addEventListener("click",(event)=>{
  if(event.target){
    displayItem(event.target)
  }
})
closeBtn.addEventListener("click",()=>{
  if(lightBox.style.display==="flex"){
    lightBox.style.display="none";
  }
})
lightBox.addEventListener("click",()=>{
  if(lightBox.style.display==="flex"){
    lightBox.style.display="none";
  }
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

Do you have a question?

3

Have you tried attaching a click event directly to the gallery-item element?

4

It does not pass the requirements

5

item by item for each?

6

Yes, in my experience,
sometimes the test does not only evaluate the output, but also the process.

you can use querySelectorAll() to get the nodeList , then attach the listener in forEach()