Text not corresponding to correct images/videos in modal

  html, javascript, lightbox, modal-dialog

I played around with the original W3 schools modal/lightbox and I now have 8 modals on one page and each displays a mixture of video and images. They all work fine and open and close and display the right content, but I can’t get titles to show underneath the videos. On the second modal one video shows a title and the picture after it shows a video title from the modal after that. Could some one please help me unpick this. I only want titles to show for certain videos and not on pictures. And I’m also using plain Javascript not JQuery. Thank you!

HTML:

<!-- modal two -->
    <div class="work-boxes" id="niketown-90">
      <a href="#" onclick="openModal('myModal2');currentSlide('myModal2', 1)"></a>
      <h3>Nike London</h3>
    </div>
    <div id="myModal2" class="modal">
      <span class="close cursor" onclick="closeModal('myModal2')">&times;</span>
      <div class="modal-content">
        <div class="mySlides">
          <video class="videoPause" src="./Video/London.mp4" style="width: 100%;" id="London Launch" controls></video>
        </div>
        <div class="mySlides">
          <img src="./Image/_DSC1620.jpg" style="width:100%">
        </div>  
          <a class="prev" onclick="plusSlides('myModal2',-1)">❮</a>
          <a class="next" onclick="plusSlides('myModal2',1)">❯</a>
      </div>
        <div class="caption-container">
          <p id="caption"></p>
        </div>
    </div>

<!-- modal three -->
    <div class="work-boxes" id="sessionsproject">
      <a href="#" onclick="openModal('myModal3');currentSlide('myModal3', 1)"></a>
      <h3>BlankSpace Sessions</h3>
    </div>
    <div id="myModal3" class="modal">
      <span class="close cursor" onclick="closeModal('myModal3')">&times;</span>
      <div class="modal-content">
        <div class="mySlides">
          <video class="videoPause" src="./Video/Sessions Trailer.m4v" style="width: 100%;" id="SESSIONS TRAILER" controls></video>
        </div>
        <div class="mySlides">
          <video class="videoPause" src="./Video/Cherit Trailer.m4v" style="width: 100%;" id="CHERIT" controls></video>
        </div>
        <div class="mySlides">
          <video class="videoPause" src="./Video/Fred Trailer.m4v" style="width: 100%;" id="FRED" controls></video>
        </div>
        <div class="mySlides">
          <video class="videoPause" src="./Video/Oliver Trailer.m4v" style="width: 100%;" id="OLIVER" controls></video>
        </div>
        <div class="mySlides">
          <video class="videoPause" src="./Video/SHANTEH Trailer.m4v" style="width: 100%;" id="SHANT&eacute;H" controls></video>
        </div>       
        <a class="prev" onclick="plusSlides('myModal3',-1)">❮</a>
        <a class="next" onclick="plusSlides('myModal3',1)">❯</a>
      </div>
        <div class="caption-container">
          <p id="caption"></p>
        </div>
    </div>

Javascript:

var modalDiv;
  
  function openModal(id) {
    document.getElementById(id).style.display = "block";
  }
  
  function closeModal(id) {
  close();
  stop();
    function close() {
      document.getElementById(id).style.display = "none";
    }
  }

  var slideIndex = 1;
  showSlides('myModal', slideIndex);
  showSlides('myModal2', slideIndex);
  showSlides('myModal3', slideIndex);
  showSlides('myModal4', slideIndex);
  showSlides('myModal5', slideIndex);
  showSlides('myModal6', slideIndex);
  showSlides('myModal7', slideIndex);
  showSlides('myModal8', slideIndex);

  function plusSlides(id, n) {
  next();
  stop();
    function next() {
      showSlides(id, slideIndex += n);
    }
  }

var pauseVideo = document.getElementsByClassName("videoPause");

function stop() {
  var i;
  for (i = 0; i < pauseVideo.length; i++) {
    pauseVideo[i].pause();
  }
}

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

  function showSlides(id, n) {
    var i;
    var modalDiv = document.getElementById(id);
    var slides = modalDiv.getElementsByClassName("mySlides");
    var captionText = document.getElementById("caption");
    var video = document.getElementsByTagName("video");
    
    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 < video.length; i++) {
      video[i].className = video[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    video[slideIndex].className += " active";
    captionText.innerHTML = video[slideIndex].id;  
  
}

Source: Ask Javascript Questions

LEAVE A COMMENT