Два лайтбокса на одной странице перекрываются

Question

Я использую настроенный лайтбокс для показа изображений на моей веб-странице.

Когда я использую один и тот же лайтбокс дважды на одной странице. случается какая-то ошибка.

Я разделил каждый лайтбокс, поместив содержимое в два отдельных элемента div и добавив скрипт, дважды ссылающийся на каждый лайтбокс, и таким образом разделил их.

Когда я перезагружаю страницу, я получаю множество разных ошибок.

Посмотри.

           

        <!--Lightbox script-->
        
        <script>
        function openModal() {
          document.getElementById('myModal1').style.display = "block";
        }
        
        function closeModal() {
          document.getElementById('myModal1').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");
          var dots = document.getElementsByClassName("demo");
          var captionText = document.getElementById("caption");
          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;
        }
        </script>
    

		       <!--Lightbox script-->
        
        <script>
        function openModal() {
          document.getElementById('myModal2').style.display = "block";
        }
        
        function closeModal() {
          document.getElementById('myModal2').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");
          var dots = document.getElementsByClassName("demo");
          var captionText = document.getElementById("caption");
          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;
        }
        </script>
    

.containercontent1

{
position:relative;
width:100%;
height:750px;
 }

.containercontent2

{
position:relative;
width:100%;
height:750px;
 }

/* Lightbox css */

.column1 {
box-sizing:border-box;
padding:5px;
float:left;
width:30%; }

.column1:hover {
cursor:pointer; }

.modal1 {
  display: none;
  position: fixed;
  z-index: 12;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal2 {
  display: none;
  position: fixed;
  z-index: 12;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  position: absolute;
  z-index:12;
  background-color: #fefefe;
  top:50px;
  left:200px;
  padding: 0;
  width: 90%;
  max-width:900px; 
  
  
}
  
/* lightbox buttons*/
 
.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 {
  display: none;
}

.cursor {
  cursor: pointer
}

.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;
}

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

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

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

/*lightbox img*/
img{
margin-bottom: -4px;}

  <div class="containercontent1">


        <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" class="column1" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" class="column1" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">

        </div>

            <div id="myModal1" class="modal">

              <span class="close cursor" onclick="closeModal()">&times;</span>


                                <div class="modal-content">

                                            <div class="mySlides">
                                              <div class="numbertext">1 / 2</div>
                                              <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" style="width:100%">
                                            </div>

                                            <div class="mySlides">
                                              <div class="numbertext">2 / 2</div>
                                              <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" style="width:100%">
                                            </div>




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


                                    </div>  

            </div>








    <div class="containercontent2">



                <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" class="column1" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">


                <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" class="column1" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">


                <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" class="column1" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">              

    </div>


          <div id="myModal2" class="modal">

              <span class="close cursor" onclick="closeModal()">&times;</span>


                                <div class="modal-content">

                                            <div class="mySlides">
                                              <div class="numbertext">1 / 3</div>
                                              <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" style="width:100%">
                                            </div>

                                            <div class="mySlides">
                                              <div class="numbertext">2 / 3</div>
                                              <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" style="width:100%">
                                            </div>

                                            <div class="mySlides">
                                              <div class="numbertext">3 / 3</div>
                                              <img src="" style="width:100%">
                                            </div>



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


                                    </div>        
            </div>

Answer 1

Проблема в том, что вы определяете функции с одинаковыми именами два раза. Два тега не разделяются в области видимости, поэтому, если вы определите функцию с одинаковым именем, последний из них будет всегда побежден.

Так что выбирайте разные имена для своих функций или напишите общую функцию, которая проверит, для какого триггера был нажат.