Build a Lightbox Viewer - Build a Lightbox Viewer

JavaScript
1

Tell us what’s happening:

Okay so can anyone please tell me why I pass tests 14&15 when I use querySelector but fail when I use querySelectorAll?

The click only works for the first picture but I pass the tests and when I use all the click doesn’t work and i fail them. What is going on!

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>Image 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"></button>
      <img id="lightbox-image">
    </div>

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

</html>

/* file: styles.css */
h1 {
  text-align: center;
  font-size: 38px;
  background-color: lightblue;
}

.lightbox {
  background-color: rgba(80,80,80,0.5); 
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;

}

.gallery {
  display: flex;
  height: 150px;
  justify-content: space-between;
  margin: 50px;
}

img {
}

/* file: script.js */
const lightbox = document.querySelector(".lightbox");
const closeBtn = document.getElementById("close-btn");
const galleryItem = document.querySelector(".gallery-item");
const lightboxImage = document.getElementById("lightbox-image");
const gallery = document.querySelector(".gallery");

const allGalleryItem = document.querySelectorAll(".gallery-item");

const noThumbnail = galleryItem.src.replace("-thumbnail","");

galleryItem.addEventListener("click", () => {
  lightbox.style.display = "flex";
  galleryItem.src = noThumbnail;
}
);

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

What is the difference between querySelector and querySelectorAll? What does querySelectorAll return?

3

the querySelectorAll returns an object with keys…? whereas query selector returns an empty object?

4

The code is now updated to this but I’ve still not got my mind around this issue as it only still works on the first thumbnail…not sure what’s not clicking in my brain!!

const lightbox = document.querySelector(".lightbox");
const closeBtn = document.getElementById("close-btn");
const galleryItem = document.querySelector(".gallery-item");
const lightboxImage = document.getElementById("lightbox-image");

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

const allGalleryItem = document.querySelectorAll(".gallery-item");

console.log(allGalleryItem);
console.log(galleryItem)


galleryItem.addEventListener("click", () => {
  lightbox.style.display = "flex";
  const noThumbnail = galleryItem.src.replace("-thumbnail","");
  allGalleryItem.src = noThumbnail;
}
);

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

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

galleryItem will only select the first element on the page with that class.
If you want to select all gallery items you will need to use querySelectorAll

querySelectorAll returns a NodeList.

The great thing about that is you can loop through that list and attach an event listener to each gallery item.

You can look to this old forum post on how that works.

You can also look to this codepen demo on how that works too

https://codepen.io/Jessica-Wilkins-the-flexboxer/pen/WbvbxPg?editors=1011

Once you attach a click event to each gallery item, then you can open the lightbox and show the correct images at the correct times.

Hope that helps