Build a Lightbox Viewer - Build a Lightbox Viewer

JavaScript
1

Tell us what’s happening:

Everything work but : While the lightbox is up, clicking on the picture makes it display go to none. I hoped i could get around that and make it so the lighbox only disapear if I click on the cross or the lightbox itself.

How could I do that ?

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

  <body>
    <h1>Gallery of Randomness</h1>
    <div class="gallery">
      <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" alt="Random rocks vertically put">
      <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" alt="Random dark looking sky with some horses and building">
      <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" alt="Random sheeps traversing a random village of some random years before road">
    </div>
    <div class="lightbox">
      <button id="close-btn">&times;</button>
      <img id="lightbox-image">
      
    </div>
  <script src="script.js"></script>
  </body>

</html>

/* file: styles.css */
*{
  box-sizing: border-box;
}
body{
  background-color: lightgrey;
  text-align:center;
}

.gallery{
  width: 90%;
  display:flex;
  flex-wrap: no-wrap;
  justify-content: center;
  gap:10px;
  margin: 0 auto;
}

.gallery-item{
  width:30%;
  cursor:pointer;
}

.lightbox{
  display:none;
  background-color: rgba(120, 120, 120, 0.5);
  position:fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

.lightbox img{
  margin: 0 auto;
  max-width: 80%;
  height: auto;
  object-fit:contain;
}

#close-btn{
  display:flex;
  color: white;
  font-size: 18px;
  background-color: rgb(83, 83, 83);
  border-radius: 20px;
  justify-content:center;
  align-items: center;
  position:fixed;
  width: 30px;
  height:30px;
  right: 30px;
  top:30px;
  border:none;
} 

#close-btn:hover{
  background-color:lightgrey;
  color:red;
  cursor:pointer;
}

/* file: script.js */
const lightbox = document.querySelector(".lightbox");
const galleryItem = document.querySelectorAll(".gallery-item");
const boxImg = document.getElementById("lightbox-image");
const closeBtn = document.getElementById("close-btn")
function biggerImg(img){
  //Show lightbox
  lightbox.style.display = "flex";

  //Give lightboxIMG its source;
  let newURL = img.src.replace("-thumbnail", "");
  boxImg.setAttribute("src", newURL)
}

function closeBL(){
  //display lightbox to none
  lightbox.style.display = "none";
}

//gallery Item Event
galleryItem.forEach(img => img.addEventListener("click", () => biggerImg(img)));
//Close btn and Lightbox Event => closeBL
lightbox.addEventListener("click", () => closeBL()).stopPropagation();
closeBtn.addEventListener("click", () => closeBL()).stopPropagation();

Your browser information:

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

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

Could you explain what do you mean by lightbox itself? Other than the close button, what else you’d want to hide the image?

3

No, it’s not what i meant.

What i mean is that when i click on the lightbox or the X button, then it closes. All good.

But if I click on the Image that pops up in the lightbox, then it closes too. I don’t want that to happend. I want a picture click to do nothing.

4

Ah, I understand now. Hmm, is there a way to check what exactly was clicked?

5

I tried loggin it by changing closeBL function with console.log(event.target.id) :

lightbox.addEventListener("click", () =>  console.log(event.target.id));

closeBtn.addEventListener("click", () =>  console.log(event.target.id));

What returns when I click the X button is (close-btn) (all good :smiley: )

What returns when I click the lightbox : Nothing D:

What return when I click the frame of the image is : lightbox-image

I don’t understand why that is… Why would the close button log two times and the lightbox-image even be clickable at that point ?

6

Button is inside of the .lightbox element, so first event is fired for the button, but after that event is propagated upper to the .lightbox.

If both the button and image are recognized, isn’t that information enough to determine whether the lightbox should be hidden?

7

I understood your first paragraph. I can then remove what the call of button click does.

I did not understand your second paragraph. I don’t know how I am supposed to make it so the lightbox-image does nothing.

I have tried to stop the thing from listening after reading you (using :

boxImg.removeEventListener("click", closeBL())

) But it doesnt work.

Thanks for your time !

EDIT : I FOUND A WAY !

function closeBL(target){
  if(target == "lightbox-image"){
    return
  }
  //display lightbox to none
  lightbox.style.display = "none";
}

and then :

lightbox.addEventListener("click", () => closeBL(event.target.id));

Did you think of something that was better than that ?

Also, is there a way for me to have the box for the image to be the size of the image ?

8

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.