Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

Tell us what’s happening:

Step 14:
14. When you click one of your .gallery-item elements, the .lightbox element’s display property should be set to flex to make .lightbox and the two elements within it visible.

I’ve checked dev tools, .lightbox has display set to flex and both elements (img and button) become visible.
I’ve read the forums, run this through AI, rewritten it, nothing I do seems to work and AI starts telling me it’s because a lack of flex styling (it’s not).
Any helps appreciated, thanks.

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 src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" alt="" class="gallery-item" />
    <img src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" alt="" class="gallery-item" />
    <img src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" alt="" class="gallery-item" />
  </div>
  <div class="lightbox">
    <button id="close-btn">&times;</button>
    <img src="" alt="" id="lightbox-image">
  </div>
  <script src="script.js"></script>
</body>

</html>

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

#close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: white;
  border: none;
  border-radius: 4px;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/* file: script.js */
const gallery = document.querySelector('.gallery');
const lightbox = document.querySelector('.lightbox');
const setLightboxImg = document.getElementById('lightbox-image');
const closeBtn = document.getElementById('close-btn');

gallery.addEventListener('click', (e) => {
  if(e.target.classList.contains('gallery-item')) {
    setLightboxImg.src = e.target.src.replace('-thumbnail', '');
    lightbox.style.display = 'flex';
  }
});

closeBtn.addEventListener('click', () => {
  setLightboxImg.src = '';
  lightbox.style.display = 'none';
});

lightbox.addEventListener('click', () => {
  setLightboxImg.src = '';
  lightbox.style.display = 'none';
});

Your browser information:

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

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

To make it pass, you should add the click event listener directly to the .gallery-item elements instead of their parent gallery element, because the test checks the click event on the .gallery-item elements themselves.

1 Like