Build a Lightbox Viewer - Build a Lightbox Viewer

JavaScript
1

Tell us what’s happening:

Tell us what’s happening:
Failed:9. Your .lightbox element should have fixed positioning.
Failed:10. Your .lightbox element should cover the entire viewport.
Failed:11. Your .lightbox element should be aligned with top left corner Failed:16. When your .lightbox element is visible and you click the #close-btn button, the .lightbox element’s display should be set back to none.
Failed:17. When your .lightbox element is visible and you click the .lightbox element, the .lightbox element’s display s

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="style.css">
  </head>
  <body>

    <div class="gallery"> 
<img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" alt="Stonehenge">
<img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" alt="Storm">
<img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" alt ="Trees">

</div>
<div class="lightbox">
  <button id="close-btn">&times;</button>
  <img id="lightbox-image" src="" alt="Enlarged">
  </div>
  
  <script src="script.js"></script>

  </body>
</html>

/* file: styles.css */
.gallery {
  display: flex;
  justify-content: center
  gap: 20px;
  
}

.gallery-item {
  cursor: pointer;

}

.lightbox{
  display: "none";
  position: "fixed";
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.lightbox.show{
  display: flex;
  opacity: 1
  pointer-events: none;
}

#close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
}




/* file: script.js */
window.onload=function() {}
const galleryItems = document.querySelectorAll(".gallery-item");
const lightbox = document.querySelector(".lightbox");
const lightboxImage = document.getElementById("lightbox-image");
const closeButton = document.getElementById("close-btn");

console.log("Gallery items found:", galleryItems.length);
console.log("lighbox found:", lightbox),
console.log("lightbox Image found:", lightboxImage);

galleryItems.forEach(item=>{
  item.addEventListener("click", ()=>{
    const fullSizeSrc = item.src.replace("-thumbnail", "");
    lightboxImage.src=fullSizeSrc;
    lightbox.classList.add("show");

  });
});

closeButton.addEventListener("click", ()=>{
  console.log("Close button clicked");
  lightbox.classList.remove("show");
});

lightbox.addEventListener("click",(e) => {
  console.log("Clicked outside Image, closing lightbox");
  if(e.target === lightbox) {
    lightbox.classList.remove("show");

  }
});

Your browser information:

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

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

Hi @BooBoo212

Check the link element. The filename is not quite right.

Then take a look at the CSS tab.
Syntax highlighting is showing some issues.

Happy coding

1 Like
3

I am still stuck on these two. I ain’t doing them any more! ugh!

  1. When your
.lightbox

element is visible and you click the

#close-btn

button, the

.lightbox

element’s

display

should be set back to

none

. 17. When your

.lightbox

element is visible and you click the

.lightbox

element, the

.lightbox

element’s

display

should be set back to

none

. // tests completed

4

Please post your updated code.

5

document.addEventListener(“DOMContentLoaded”, ()=>{
const galleryItems = document.querySelectorAll(“.gallery-item”);
const lightbox = document.querySelector(“.lightbox”);
const lightboxImage = document.getElementById(“lightbox-image”);
const closeButton = document.getElementById(“close-btn”);

console.log(“Gallery items found:”, galleryItems.length);
console.log(“lightbox found:”, lightbox),
console.log(“lightbox Image found:”, lightboxImage);

galleryItems.forEach(item=>{
item.addEventListener(“click”, () => {
const fullSizeSrc = item.src.replace(“-thumbnail”, “”);
lightboxImage.src=fullSizeSrc;
lightbox.style.display = “flex”;
lightbox.style.opacity = 1;
lightbox.style.pointerEvents= “auto”;

});
});

closeButton.addEventListener(“click”, ()=>{
console.log(“Close button clicked”);
lightbox.style.opacity = “0”;

setTimeout(() =>{
lightbox.style.display=“none”;
lightbox.style.pointerEvents =“none”;

}, 300);
});

lightbox.addEventListener(“click”,(e) => {
console.log(“Clicked outside Image, closing lightbox”);
if(e.target === lightbox) {
lightbox.style.opacity = “0”;

setTimeout(() =>{
lightbox.style.display = "none";
lightbox.style.pointerEvents="none";

}, 300);
}
});
});

6

Tell us what’s happening:

Still stuck on these two fixes! ugh! I can’t stand lightboxes! LOL 16. When your .lightbox element is visible and you click the #close-btn button, the .lightbox element’s display should be set back to none.
17. When your .lightbox element is visible and you click the .lightbox element, the .lightbox element’s display should be set back to none.
// tests completed

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" alt="Stonehenge">
<img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" alt="Storm">
<img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" alt ="Trees">

</div>
<div class="lightbox">
  <button id="close-btn">&times;</button>
  <img id="lightbox-image" src="" alt="Enlarged">
  </div>
  
  <script src="script.js"></script>

  </body>
</html>




/* file: styles.css */
.gallery {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
  
}

.gallery-item {
  width: 250px;
  height: 250px;
  padding-top: 50;
  

}

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

#lightbox-image{
  height: 70vh;
  width: 70vw;
  display: flex;
  
}

#close-btn {
  position: fixed;
  top: 5%;
  right: 5%;
  font-size: 50px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
}




/* file: script.js */
document.addEventListener("DOMContentLoaded", ()=>{
  document.body.addEventListener("click", () =>{
    console.log("body clicked!");

  });
  console.log("DOM fully loaded and parsed");
const galleryItems = document.querySelectorAll(".gallery-item");
const lightbox = document.querySelector(".lightbox");
const lightboxImage = document.getElementById("lightbox-image");
const closeButton = document.getElementById("close-btn");

console.log("Gallery items found:", galleryItems.length);
console.log("lightbox found:", lightbox),
console.log("lightbox Image found:", lightboxImage);
console.log("Close button:", closeButton);

galleryItems.forEach(item=>{
  item.addEventListener("click", () => {
    const fullSizeSrc = item.src.replace("-thumbnail", "");
    lightboxImage.src=fullSizeSrc;
    lightbox.style.display = "flex";
    lightbox.style.opacity = 1;
    lightbox.style.pointerEvents= "auto";
    console.log("updated Image Source:", fullsize);

  });
});

closeButton.addEventListener("click", ()=>{
  console.log("Close button clicked");
  lightbox.style.opacity = "0";

  setTimeout(() =>{
    lightbox.style.display="none";
    lightbox.style.pointerEvents ="none";

  }, 300);
});

lightbox.addEventListener("click",(e) => {
    if(!lightboxImage.contains(e. target)) {
      console.log("Clicked outside image, closing lightbox ")
    lightbox.style.opacity = "0";

    setTimeout(() =>{
    lightbox.style.display = "none";
    lightbox.style.pointerEvents="none";
  }, 300);
  }
});
});

console.log("lightbox element", lightbox);
console.log("lightbox.js is loaded!");

Your browser information:

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

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

7

Console logged them and this is what I get:
Uncaught ReferenceError: lightbox is not defined
DOM fully loaded and parsed
Gallery items found: 3
lightbox found: NaN
lightbox Image found: NaN
Close button: NaN

8

Also the HTML and CSS

9

Hi @BooBoo212

For debugging, place the console log immediately after the variable declaration.

You still need to add the functionality.

Happy coding