Build a Lightbox Viewer - Build a Lightbox Viewer

JavaScript
1

Tell us what’s happening:

I am having trouble with step 14.
Log shows changes are correct but I am still failing. Would it be due to freeCodeCamp looking for a querySelectorAll and then a forEach eventListener?
Sorry for the layout being a bit of a mess I’ve been stuck on 14 so tried different things and not made the code very considerate for others.

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>
    <main>
      <h1 id="title">Gallery Images</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>
    </main>
    <script src="script.js"></script>
  </body>

</html>

/* file: styles.css */
#title{
  text-align: center;
  margin-top: 100px;
  background-color: rgb(0, 255, 255, 30%)
}

.gallery{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 20px;
}

.gallery-item{
  padding: 0 5px;
  width: 250px;
  height: 300px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s;
}

.lightbox{
  display: none;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
}

#close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2rem;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
}

/* file: script.js */
const lightbox = document.querySelector(".lightbox");
const lightboxImg = document.querySelector("#lightbox-image")
const gallery = document.querySelector(".gallery");
const closeBtn = document.querySelector("#close-btn");

function openLightbox(e){
  const imgThumb = e.src;
  const imgFull = imgThumb.replace("-thumbnail", "");

  lightboxImg.src = imgFull;
  lightbox.style.display = "flex";
  
  console.log(lightbox.style.display);
  console.log(imgThumb);
  console.log(imgFull);
};

function closeLightbox(){
  lightbox.style.display = "none";
  console.log(lightbox.style.display);
};

//bubble selector for event open
gallery.addEventListener("click", (e) => {
  if (e.target.classList.contains("gallery-item")) {
    openLightbox(e.target);
  }
});

//bubble selector for event closer
lightbox.addEventListener("click", (e) => {
  if (
    e.target === e.currentTarget || 
    e.target === closeBtn){
      closeLightbox()
    }
});

Your browser information:

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

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

Hi @toothpick164,

Should your event listener be on the entire gallery or each item within the gallery?

Happy coding!

3

Does changing that fix it? Listening to events on the entire gallery is a valid strategy though as events bubble up from the children to the parent normally unless fCC’s environment prevents that.

4

It does.

I tested by adding a reference to the .gallery-items classes, applying forEach() to add a “click” event listener to each item, and referencing the openLighbox function as the second listener argument. The only other thing I changed was const imgThumb = e.src; to const imgThumb = e.target.src;.

5

Got it i referenced the gallery items themselves instead of the bubble.
Changed the event listener and the .src so thats it now done.

Is there a reason for it not passing the bubble, not sure if its due to FCC or if its my understanding.

I thought that was an okay method for event listeners or have i misunderstood the use case for that kind of method?

6

It is a bug in fCC. I will be opening a GitHub issue to report it