Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

What am I doing wrong

Tell us what’s happening:

  1. When you click one of your .gallery-item elements, the #lightbox-image element’s src should be set to a full-size version of the image clicked by removing -thumbnail from the image’s src attribute.
  2. When your .lightbox element is visible and you click the .lightbox element, the .lightbox element’s display should be set back to none.

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 rel ="stylesheet" href ="styles.css">
  </head>

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

  <script src ="script.js"></script>
  </body>

</html>

/* file: styles.css */
html{
  width: 100%;
  height: 100vh;
}

body{
  height: 100%;
  width: 100%
}

.lightbox{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: crimson;
  display: none;
}

/* file: script.js */
const gallery = document.querySelector(".gallery")
const images  = gallery.querySelectorAll(".gallery-item")
const lightBox  = document.querySelector(".lightbox")
const lightBoxImages = document.getElementById("lightbox-image")
const closeBtn  = document.getElementById("close-btn")

images.forEach(image => image.addEventListener("click", () =>  {lightBox.style.display ="flex";
lightBoxImages.src = image.src.replace("-thumbnail.jpg","")
})
);

closeBtn.addEventListener("click", () => {
  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/141.0.0.0 Safari/537.36

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

What part of the image src were you instructed to remove? :wink:

And I don’t see an event handler for lightbox.