Build a Lightbox Viewer - Build a Lightbox Viewer

JavaScript
1

Tell us what’s happening:

My all tests passed in this project but my project is not working properly.
When I click on 2nd and 3rd picture nothing happens but I am sure I have done everything correctly.
Please guide me on this.

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Lightbox Viewer</title>
    <link rel="stylesheet" href="styles.css">
</head>

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

</html>

/* file: script.js */
const lightBox = document.querySelector(".lightbox");

const photo = document.querySelector(".gallery-item");

const closeBtn = document.querySelector("#close");

const largePic = document.querySelector("#lightbox-image");

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

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

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


photo.addEventListener("click", () => {
  lightBox.style.display = "flex"
});

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

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

pic1.addEventListener("click", () => {
  largePic.setAttribute("src", "https://cdn.freecodecamp.org/curriculum/labs/stonehenge.jpg");
});

pic2.addEventListener("click", () => {
  largePic.setAttribute("src", "https://cdn.freecodecamp.org/curriculum/labs/storm.jpg");
});

pic3.addEventListener("click", () => {
  largePic.setAttribute("src", "https://cdn.freecodecamp.org/curriculum/labs/trees.jpg");
});

/* file: styles.css */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
}

#close {
  cursor: pointer;
}

Your browser information:

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

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

1 Like
2

What troubleshooting have you tried?

Add some console.log() statements in your code so you can get some feedback to work with. Confirm what’s being clicked, what’s being triggered etc.

When you click them, does photo.addEventListener get triggered?

What does document.querySelector return?

3

You selected dom elements with querySelector(‘’) atribute which only selects the first element has that. If you use querySelectorAll(‘’) it will add the desired changes to all elements that are using the id, class, tag etc.

4

okay

I add 2 console statements -

pic2.addEventListener("click", () => {
  largePic.setAttribute("src", "https://cdn.freecodecamp.org/curriculum/labs/storm.jpg");
  console.log("pic2");
});

pic3.addEventListener("click", () => {
  largePic.setAttribute("src", "https://cdn.freecodecamp.org/curriculum/labs/trees.jpg");
    console.log("pic3");
});

Both eventListerners are triggered.

querySelector returns 1st element that matches in the document.

I think I got your point.

1 Like
5

Got it.
Thank you very much :slight_smile:

1 Like
6

I did some changes at two places-

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

photo.forEach((pic) => {
  pic.addEventListener("click", () => {
  lightBox.style.display = "flex"
})
})

And now it works fine.
Thank you very much :slight_smile:

Also thank you for letting me think myself and not telling me the solution.

1 Like