//JS page one
    let box = document.getElementsByClassName("box");

    //click event
    box[0].addEventListener("click", fn1);
    box[1].addEventListener("click", fn2);
    box[2].addEventListener("click", fn3);
    box[3].addEventListener("click", fn4);

  //show description at click and hide "click for info"
    function fn1() {
    window.location = 'carousel.html';
    }
    function fn2() {
    window.location = 'carousel.html#2';
    }
    function fn3() {
    window.location = 'carousel.html';
    }
    function fn4() {
    window.location = 'carousel.html';
    }
    
   //JS page two
      /*lightbox code*/ 
      let slideIndex = 1;
      showSlides(slideIndex);
      
      // Next/previous controls
      function plusSlides(n) {
        showSlides(slideIndex  = n);
      }
      
      // Thumbnail image controls
      function currentSlide(n) {
        showSlides(slideIndex = n);
      }
      
      function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        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";
      }

<!--HTML PAGE ONE-->
    <div id="container">
      <!--one-->
      <div >
        <img title="paint one"  src="images/paintings/1.jpg"> 
        <p ></p>
      </div>
     <!--two-->
      <div >
        <img title="paint two"  src="images/paintings/2.jpg"> 
        <p ></p>
      </div>
      <!--three-->
      <div >
        <img title="paint one"  src="images/paintings/3.jpg"> 
       <p ></p>
      </div>
     <!--four-->
      <div >
        <img title="paint two"  src="images/paintings/4.jpg"> 
        <p ></p>
      </div>
    </div>
    
     <!--HTML PAGE 2 - CAROUSEL-->
    <div id="lightbox">
    <div >

  <!-- Full-width images with number and caption text -->
  <div >
    <div >1 / 4</div>
    <img  src="images/paintings/1.jpg">
    <div >Caption Text</div>
  </div>

  <div >
    <div >2 / 4</div>
    <img  src="images/paintings/2.jpg">
    <div >Caption Two</div>
  </div>

  <div >
    <div >3 / 4</div>
    <img  src="images/paintings/3.jpg">
    <div >Caption Three</div>
  </div>

  <div >
    <div >4 / 4</div>
    <img  src="images/paintings/4.jpg">
    <div >Caption Three</div>
  </div>
  <!-- Next and previous buttons -->
  <a  onclick="plusSlides(-1)">&#10094;</a>
  <a  onclick="plusSlides(1)">&#10095;</a>
  </div>
   </div>

I was wondering if it is possible to show the desired image in page 2 Html based on what is clicked in page 1 Html. I know a solution could be to create an HTML page for each photo I want to show on click: I should just change the windows.location of the addEventListener and then in the JS file set the number corresponding to the slideIndex but it would be really good to find a solution without duplicating the pages. I hope I was clear

CodePudding user response：

I found a good alternative. Basically in Html page one I assigned an id to each image and in js page one in the fn1, fn2, fn3 and fn4 window.location I added the hash of the relative id eg: (window.location = 'carousel.html#1'). Then in js page 2 I added the following code:

  window.addEventListener('load', (event) => {

if(location.hash === "#1") {
  currentSlide(1)
}
if(location.hash === "#2") {
   currentSlide(2)
}

if(location.hash === "#3") {
   currentSlide(3)
  }
  if(location.hash === "#4") {
    currentSlide(4)
  }

})

to avoid a possible slow loading in the css file I added a loading gif as a background image in the .image class