Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

Tell us what’s happening:

Lightbox viewer can’t fullfill test 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.

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

/* file: script.js */
const images = document.querySelector(".gallery");
const lightbox = document.querySelector(".lightbox")
const lightboxImage = document.getElementById("lightbox-image");
const close = document.getElementById("close")

images.addEventListener("click", clickThumbnail);
close.addEventListener("click", closeImage);
lightbox.addEventListener("click", closeImage);

function clickThumbnail(event){

  lightbox.style.display = "flex";
  const thumbnailLink = event.target.src;
  const lightboxLink = thumbnailLink.replace("-thumbnail", "");
  lightboxImage.src = lightboxLink;
}

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

/* file: styles.css */
.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-top: 50px;
  margin: 0 auto;
}
 
.gallery-item {
  width: 250px;
  height: 250px;
}
 
body{
  background-color:black;
}
 
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
}
 
#lightbox-image{
  height:80vh;
  width:80vw;
}
#close{
  position:fixed;
  top:5%;
  right:5%;
  z-index:1000;
  color:white;
  font-size:50px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

I’m having the same issue and I approached it the same way with event propagation. Is this not the way you’re supposed to do it?

3

I would take this very literally and use that selector

1 Like
4

Many thanks, I think you are correct :smiley:

1 Like
5

Pay close attention to those hints, they are often telling you exactly what you need to know

6

well i am doing exactly as told but unable to clear tests

7

hi @RidaZahra , please open your own topic to ask your questions

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.