Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

Tell us what’s happening:

Need help checking my code. It does what it needs to do, checked dev tools and it shows the updated Url of the image clicked added in the correct element.

unable to pass number 15.

lightBoxViewer
lightBoxViewer1900×845 140 KB

Your code so far

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

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

<body>
  <h1>Painting Gallery</h1>
  <div class="gallery">
    <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" alt="stonehenge painting">
    <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" alt="storm painting">
    <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" alt="trees with lams painting">
  </div>
  <div class="lightbox">
    <span id="close">&times;</span>
    <img id="lightbox-image" src="">
  </div>
  <script class="gallery-item" src="script.js"></script>
</body>

</html>

/* file: script.js */
const thumbnails = document.querySelectorAll(".gallery-item");
const fullImage = document.getElementById("lightbox-image");
const lightbox = document.querySelector(".lightbox");
const close = document.getElementById("close")

for (const thumbnail of thumbnails) {
  thumbnail.addEventListener("click", () => {
      lightbox.style.display = "flex";
      fullImage.src = thumbnail.src.replace("-thumbnail", "");
  });
};

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

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



/* file: styles.css */
body {
    margin: 5rem auto;
  }
  
  h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: powderblue;
    height: 80px;
    font-family: Tahoma, sans-serif;
    color: white;
    text-shadow: #ffbb 1px 0 5px;
    letter-spacing: .25em;
  }
  
  .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
  }
  
  .gallery-item {
    height: 350px;
    width: 300px;
    border-radius: 5px;
  }
  
  .gallery-item:hover {
    cursor: pointer;
    transform: scale(1.08);
    transition: 0.8s;
  }
  
  .lightbox {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba( 255, 255, 255, 0.8 );
  }
  
  #lightbox-image {
    display: flex;
    width: 100%;
    height: auto;
    margin: auto;
  }
  
  #lightbox-image:hover {
    cursor: pointer;
  }
  
  #close {
    position: relative;
    left: 20px;
    font-size: 5em;
    font-weight: 600;
  }
  
  #close:hover {
    cursor: pointer;
  }

  @media (width < 800px) {
    body {
      display: grid;
    }
  }

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

2

found that bug! :sweat_smile:

4
  1. src attribute of the <img id="lightbox-image"> is empty. It needs to be dynamically updated when a user clicks on a gallery image.
  2. tag for `script.js` incorrectly has the class `gallery-item`. This is invalid because `` tags should not have classes.
1 Like