Simplify JS code for photo gallery with loop not working

Question

I have a photo gallery in JavaScript, using Nuxt.js. In this photo gallery, it get the background image for display the little image of the photo gallery in full screen.
Everything is working well, but my code is not really good (it can be improved, because it's repetitive). Here is my actual js, scss and vue code.

window.addEventListener('load', function () {
  // Add the photo corresponding to the one in the photo gallery, to the photo gallery full screen
  const photo1 = document.querySelector(".photo:nth-child(1)");
  const style1 = photo1.currentStyle || window.getComputedStyle(photo1, false);
  const photoBackground1 = style1.backgroundImage.replace(/url$(['"])?(.*?)\1$/gi, '$2').split(',')[0];
  const photoFullscreen1 = document.querySelector(".photo-fullscreen:nth-child(1)");
  photoFullscreen1.setAttribute("src", photoBackground1);

  const photo2 = document.querySelector(".photo:nth-child(2)");
  const style2 = photo1.currentStyle || window.getComputedStyle(photo2, false);
  const photoBackground2 = style2.backgroundImage.replace(/url$(['"])?(.*?)\1$/gi, '$2').split(',')[0];
  const photoFullscreen2 = document.querySelector(".photo-fullscreen:nth-child(2)");
  photoFullscreen2.setAttribute("src", photoBackground2);

  const photo3 = document.querySelector(".photo:nth-child(3)");
  const style3 = photo1.currentStyle || window.getComputedStyle(photo3, false);
  const photoBackground3 = style3.backgroundImage.replace(/url$(['"])?(.*?)\1$/gi, '$2').split(',')[0];
  const photoFullscreen3 = document.querySelector(".photo-fullscreen:nth-child(3)");
  photoFullscreen3.setAttribute("src", photoBackground3);


  // Open PopUp
  const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
  const imageFullscreen1 = document.querySelector(".slide-container img:nth-child(1)");
  const imageFullscreen2 = document.querySelector(".slide-container img:nth-child(2)");
  const imageFullscreen3 = document.querySelector(".slide-container img:nth-child(3)");

  document.querySelector(".lienImg1").onclick = function() {
    photoGalleryFullscreen.style.display = "block";
    imageFullscreen1.style.display = "block";
    slideIndex = 1;
  };

  document.querySelector(".lienImg2").onclick = function() {
    photoGalleryFullscreen.style.display = "block";
    imageFullscreen2.style.display = "block";
    slideIndex = 2;
  };

  document.querySelector(".lienImg3").onclick = function() {
    photoGalleryFullscreen.style.display = "block";
    imageFullscreen3.style.display = "block";
    slideIndex = 3;
  };

  // Close PopUp
  document.querySelector(".out").onclick = function() {
    photoGalleryFullscreen.style.display = "none";
    imageFullscreen1.style.display = "none";
    imageFullscreen2.style.display = "none";
    imageFullscreen3.style.display = "none";
    slideIndex = 1;
  };
});

// Gallery Full Screen
let slideIndex;

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  let i;
  let slides = document.querySelectorAll(".photo-fullscreen");
  if (n > slides.length) {
    slideIndex = 1
  }    
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";
}

// Photo Gallery
.photo-gallery-section {
  margin: 50px 0;

  .photo-gallery {
    width: fit-content;
    margin: auto;

    display: grid;
    grid-template-rows: 250px;
    grid-template-columns: repeat(3, 250px);
    justify-content: space-between;
    gap: 3vw;

    .photo:hover {
      cursor: pointer;
    }

    .photo:nth-child(1) {
      background: url(../static/images/yoga.jpg) center center / cover;
    }

    .photo:nth-child(2) {
      background: url(../static/images/yoga-2.jpeg) center center / cover;
    }

    .photo:nth-child(3) {
      background: url(../static/images/yoga-3.jpeg) center center / cover;
    }
  }

  .photo-gallery-fullscreen {
    display: none;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;

    .slide-container {
      width: fit-content;
      margin: calc(50vh - 225px) auto;
    }

    .slide-container img {
      height: 450px;
      z-index: 3;
      display: none;
    }

    .prev,
    .next {
      cursor: pointer;
      color: #333;
      font-weight: bold;
      font-size: 40px;
      z-index: 3;
      position: absolute;
    }

    .prev {
      margin: calc(50vh - 21px) 0;
      margin-left: 15vw;
      left: 0;
    }

    .next {
      margin: calc(50vh - 21px) 0;
      margin-right: 15vw;
      right: 0;
    }

    .out {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 2;
    }
  }
}

// Media Queries
@media screen and (min-width: 686px) and (max-width: 1025px) {
  .photo-gallery-section {
    .photo-gallery {
      grid-template-rows: repeat(2, 250px);
      grid-template-columns: repeat(2, 250px);
    }

    .photo:nth-child(3) {
      grid-column: 1 / 3;
    }
  }
}

@media screen and (max-width: 685px) {
  .photo-gallery-section {
    .photo-gallery {
      grid-template-rows: repeat(3, 250px);
      grid-template-columns: repeat(1, 250px);
    }
  }
}

    
      Gallerie Photo

      
        
        
        
      

      
        ❮
        ❯

Now, I want to simplify my JS code, but it is not working (it return undefined). Here is the new code :

  const photo = document.querySelectorAll(".photo");
  
  for (let i = 0; i < photo.length; i++) {
    const style = photo[i].currentStyle || window.getComputedStyle(photo[i], false);
    const photoBackground = style.backgroundImage.replace(/url$(['"])?(.*?)\1$/gi, '$2').split(',')[0];
    const photoFullscreen = document.querySelectorAll(".photo-fullscreen");
    photoFullscreen[i].setAttribute("src", photoBackground);
  }

Thank you very much for your help, Maxime

Simplify JS code for photo gallery with loop not working

0 Answers