Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

Tell us what’s happening:

Cannot pass test 13 “Your .lightbox element should be hidden initially” even though I have set hidden in the element attribute.

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">
    <link rel="stylesheet" href="styles.css">
    <title>Lightbox Viewer</title>
  </head>

  <body>
    <main>
      <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" hidden>
        <button id="close-btn">&times;</button>
        <img id="lightbox-image" src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge.jpg">
      </div>
    </main>
  </body>

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

/* file: styles.css */
h1 {
  text-align: center;
  background-color: teal;
  color: white;
}

.lightbox {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery > img {
  height: 50vh;
  width: 30vh;
  object-fit: cover;
  padding: 10px;
}

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

lightbox.style.visibility = "hidden";

function viewLightbox(src) {
  lightbox.style.display = "flex";
  const newLink = src.replace("-thumbnail", "");
  console.log(newLink);
  lightboxImg.src = newLink;
}

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

galleryBtn.forEach(elem => elem.addEventListener("click", () => viewLightbox(elem.src)));
closeBtn.addEventListener("click", () => closeLightbox());
lightbox.addEventListener("click", () => closeLightbox());

Your browser information:

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

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer
https://www.freecodecamp.org/learn/full-stack-developer/lab-lightbox-viewer/build-a-lightbox-viewer

2

It looks like you are using 3 different methods to hide/unhide your lightbox.

  1. The HTML hidden attribute
  2. style.display
  3. style.visibility

These aren’t related, so you aren’t hiding and unhiding it. You need to choose one of these.

3

Have you tried using the CSS to hide it?