Build a Lightbox Viewer - Build a Lightbox Viewer

Curriculum Help
1

Tell us what’s happening:

My code passed all the tests but when clicking image element in lightbox div it should,'t disappear but it does.
What do i need to change so that when i only click at background of lightbox div its display becomes none and when i click on any child elements in it, lightbox doesn’t change.

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>
    <h1>Museum Gallery</h1>
    <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" />
        </div>

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

</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 10px 0;
}

h1 {
  margin: 50px auto 40px;
  text-align: center;
  background-color: hsl(250, 40%, 80%)
}

.gallery {
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin: 0 auto;
  padding: 0;
  gap: 10px;
}

.gallery-item {
  width: 300px;
  height: 360px;
  object-fit: cover;
  transform: scale(1);
}

.gallery-item:hover {
  transform: scale(1.1);
  transition: transform 0.1s ease;
}


#close-btn {
  margin: 0;
  background-color: transparent;
  appearance: none;
  color: black;
  border: none;
  font-size: 30px;
  z-index: 1;
  outline: none;
  position: fixed;
  top: 20px;
  left: 20px;
}

.lightbox {
  display: none;
  margin: 0 auto;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  background-color: hsla(0, 0%, 0%, 0.1);
  width: 100vw;
  height: 100vh;
  border: none;
}

#lightbox-image {
  width: 70%;
  margin: 40px auto;
}

/* file: script.js */
const gallery = document.querySelectorAll(".gallery");

const lightbox = document.querySelector(".lightbox");

const closeBtn = document.getElementById("close-btn");

const lightboxImage = document.getElementById("lightbox-image");

function setDialogImgSrc(src) {
  let newSrc = `${src.slice(0, src.indexOf("-thumbnail"))}.jpg`
  lightboxImage.setAttribute("src", newSrc);
}


gallery.forEach(item => {item.addEventListener("click", (e) => {
  lightbox.style.display = "block";
  lightbox.style.display = "flex"
  let itemSrc = e.target.src;
  setDialogImgSrc(itemSrc);
})});

closeBtn.addEventListener("click", () => {
  lightbox.style.display = "none";
});

lightbox.addEventListener("click", (event) => {
  event.stopPropagation();
  lightbox.style.display = "none";
})

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

hello!

you could do something like this –

inside the lightbox event listener, before the last line, check if the target of the click event is lightboxImage, if it is then return early since you don’t want to change the display if the click happens on the image element.

3

I later did it like this and it worked.

  if (event.target == lightbox) {
  lightbox.style.display = "none";
  }
})

Thanks.