javascript jquery node.js vue.js lightbox2

make multiple lighbox in one page with javascript (Lighbox 2& 3 doesnt work)

ive read and try all tutorial from any site on internet,im rather forgot about javascript because snce for 3 years ago i using javascript,but now im still learn again javascript with their framework.And from many tutorial ive seen one of them site is from w3school,from those site tutorial they give example to make one lighbox image on one page.but i wanna make it become three lighbox at once.but the problem come when i change each class name from each lightbox.ive try to make multiple class or id name on js script,but it seems doesnt work.

excpected: each lighbox shows their own image,but not just image on lighbox1.

my trouble: in lighbox 2 & 3,the image that appears is form lighbox 1.

and this is my code:

function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

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

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides","mySlides1");
//   for (var i = 0; i < slides.length; i++) {
//             slides[i].style.display = "none";
//         }
  var dots = document.getElementsByClassName("demo","demo1");
//   for (var i = 0; i < dots.length; i++) {
//    dots[i].style.display = "block";            
//         }
  var captionText = document.getElementById("caption","caption1");
//   for (var i = 0; i < captionText.length; i++) {
//    captionText[i].style.display = "block";            
//         }
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides.mySlides1.mySlides2 {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: rgb(10, 10, 10);
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<h2 style="text-align:center">Lightbox1</h2>
<!-- this for lightbox 1 -->
<div class="row">
  <div class="column">
    <img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>
<!-- end lightbox1 -->
<br>
<br>
<br>

<!-- this for lighbox2 -->
<h2 style="text-align:center">Lightbox2</h2>
<div class="row">
   <div class="column">
     <img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
   </div>
   <div class="column">
     <img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
   </div>
   <div class="column">
     <img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
   </div>
   <div class="column">
     <img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
   </div>
 </div>

 <div id="myModal" class="modal">
   <span class="close cursor" onclick="closeModal()">&times;</span>
   <div class="modal-content">
 
     <div class="mySlides1">
       <div class="numbertext">1 / 4</div>
       <img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%">
     </div>
 
     <div class="mySlides1">
       <div class="numbertext">2 / 4</div>
       <img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%">
     </div>
 
     <div class="mySlides1">
       <div class="numbertext">3 / 4</div>
       <img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%">
     </div>
     
     <div class="mySlides1">
       <div class="numbertext">4 / 4</div>
       <img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%">
     </div>
     
     <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
     <a class="next" onclick="plusSlides(1)">&#10095;</a>
 
     <div class="caption-container">
       <p id="caption1"></p>
     </div>
 
 
     <div class="column">
       <img class="demo1 cursor" src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
     </div>
     <div class="column">
       <img class="demo1 cursor" src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
     </div>
     <div class="column">
       <img class="demo1 cursor" src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
     </div>
     <div class="column">
       <img class="demo1 cursor" src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
     </div>
   </div>
 </div>
 <!-- end ligtbox2 -->
 <br>
 <br>
 <br>
 <!-- this ligtbox3 -->
 <h2 style="text-align:center">Lightbox3</h2>
 <div class="row">
   <div class="column">
     <img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
   </div>
   <div class="column">
     <img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
   </div>
   <div class="column">
     <img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
   </div>
   <div class="column">
     <img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
   </div>
 </div>
 
 <div id="myModal" class="modal">
   <span class="close cursor" onclick="closeModal()">&times;</span>
   <div class="modal-content">
 
     <div class="mySlides2">
       <div class="numbertext">1 / 4</div>
       <img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%">
     </div>
 
     <div class="mySlides2">
       <div class="numbertext">2 / 4</div>
       <img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%">
     </div>
 
     <div class="mySlides2">
       <div class="numbertext">3 / 4</div>
       <img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%">
     </div>
     
     <div class="mySlides2">
       <div class="numbertext">4 / 4</div>
       <img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%">
     </div>
     
     <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
     <a class="next" onclick="plusSlides(1)">&#10095;</a>
 
     <div class="caption-container">
       <p id="caption2"></p>
     </div>
 
 
     <div class="column">
       <img class="demo2 cursor" src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
     </div>
     <div class="column">
       <img class="demo2 cursor" src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
     </div>
     <div class="column">
       <img class="demo2 cursor" src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
     </div>
     <div class="column">
       <img class="demo2 cursor" src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
     </div>
   </div>
 </div>
<!-- end lightbox3 -->

Solution

The issue is in the code due to incorrect usage of couple of Javascript and HTML concepts such as:

The ids for element should be unique (read more here). In the code myModal is used as the id multiple times. Have fixed the same to create multiple unique ids such as myModal1, myModal2, myModal3.
One needs to pass the context properly while calling the function. Both the openModal and closeModal function are not taking any arguments. The value of id is hardcoded to myModal and hence it always refers to the first element with id as myModal and so, LightBox1 becomes visible. To fix that, have explicitly passed the ids while calling the function and saved it in a global variable for later usage (Note: Usage of global variable is bad. Have fixed the code in little haste so used global variable read more here).
getElementsByClassName takes only one argument, in the code it is taking two arguments at multiple places. Have fixed the same (read more here).

Have fixed the code for you and made it working for the mentioned case in the question. But there are some places where code it still wrong, that can be fixed by looking at the fixed code.

Hope it helps. Revert for any doubts/clarifications.

let modalId = "";

function openModal(id) {
  document.getElementById(id).style.display = "block";
  modalId = id;
}

function closeModal(id) {
  document.getElementById(id).style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

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

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  if (!document.getElementById(modalId)) return;
  var i;
  var slides = document.getElementById(modalId).getElementsByClassName("mySlides");
  //   for (var i = 0; i < slides.length; i++) {
  //             slides[i].style.display = "none";
  //         }
  var dots = document.getElementsByClassName("demo", "demo1");
  //   for (var i = 0; i < dots.length; i++) {
  //    dots[i].style.display = "block";            
  //         }
  var captionText = document.getElementById("caption", "caption1");
  //   for (var i = 0; i < captionText.length; i++) {
  //    captionText[i].style.display = "block";            
  //         }
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  captionText.innerHTML = dots[slideIndex - 1].alt;
}

body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row>.column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}


/* The Modal (background) */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}


/* Modal Content */

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}


/* The Close Button */

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides.mySlides1.mySlides2 {
  display: none;
}

.cursor {
  cursor: pointer;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: rgb(10, 10, 10);
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<h2 style="text-align:center">Lightbox1</h2>
<!-- this for lightbox 1 -->
<div class="row">
  <div class="column">
    <img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="openModal('myModal1');currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="openModal('myModal1');currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="openModal('myModal1');currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="openModal('myModal1');currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal1" class="modal">
  <span class="close cursor" onclick="closeModal('myModal1')">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>
<!-- end lightbox1 -->
<br>
<br>
<br>

<!-- this for lighbox2 -->
<h2 style="text-align:center">Lightbox2</h2>
<div class="row">
  <div class="column">
    <img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="openModal('myModal2');currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="openModal('myModal2');currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="openModal('myModal2');currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="openModal('myModal2');currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal2" class="modal">
  <span class="close cursor" onclick="closeModal('myModal2')">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption1"></p>
    </div>


    <div class="column">
      <img class="demo1 cursor" src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo1 cursor" src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo1 cursor" src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo1 cursor" src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>
<!-- end ligtbox2 -->
<br>
<br>
<br>
<!-- this ligtbox3 -->
<h2 style="text-align:center">Lightbox3</h2>
<div class="row">
  <div class="column">
    <img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="openModal('myModal3');currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="openModal('myModal3');currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="openModal('myModal3');currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="openModal('myModal3');currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal3" class="modal">
  <span class="close cursor" onclick="closeModal('myModal3')">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption2"></p>
    </div>


    <div class="column">
      <img class="demo2 cursor" src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo2 cursor" src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo2 cursor" src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo2 cursor" src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>
<!-- end lightbox3 -->