Part of JS code not working for photo gallery

MH info 0
Viewed 39

I have a photo gallery in JavaScript, using Nuxt.js. For more information, see this post.
Here is the new code :

  // Open PopUp
  const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
  const imagesFullscreen = document.querySelectorAll(".slide-container img");
  
  for (let i = 0; i < imagesFullscreen.length; i++) {
    photo[i].onclick = function() {
      photoGalleryFullscreen.style.display = "block";
      imagesFullscreen[i].style.display = "block";
      slideIndex = i;
    }

      // Close PopUp
    document.querySelector(".out").onclick = function() {
      photoGalleryFullscreen.style.display = "none";
      imagesFullscreen[i].style.display = "none";
      slideIndex = 1;
    };
  }

In the last part of the new code (//Close PopUp) this is not working (the rest is working), if you can help (thank you very much) :

      imagesFullscreen[i].style.display = "none";

On contrary, if I set manually i, it is working for the selected image

javascript
1 Answers

I just had to determine which image is clicked and save it in a variable. Here is the new code that is working :

  const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
  const imagesFullscreen = document.querySelectorAll(".slide-container img");
  
  for (let i = 0; i < imagesFullscreen.length; i++) {
    // Open PopUp
    photo[i].onclick = function() {
      photoGalleryFullscreen.style.display = "block";
      imagesFullscreen[i].style.display = "block";
      globalThis.imageClickedNumber = i;
      slideIndex = i;

      document.body.setAttribute("class", "disable-scroll");
    }

    // Close PopUp
    document.querySelector(".out").onclick = function() {
      if (imagesFullscreen[imageClickedNumber].style.display == "block") {
      photoGalleryFullscreen.style.display = "none";
      imagesFullscreen[imageClickedNumber].style.display = "none";
      slideIndex = 1;

      document.body.removeAttribute("class");
      }
    };
  }

MH info0
Related