模式库中的上一个和下一个按钮不起作用

Question

我找到了模态库示例并尝试使其适应我的需要，但现在我对上一个 - 下一个按钮有问题...你有什么建议吗？ (javascript 新蜂)

HTML

<div class="row">
 <div class="col">
  <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox(this);toSlide(1)" class="hover-shadow preview">
 </div>
 <div class="col">
  <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox(this);toSlide(2)" class="hover-shadow preview">
 </div>
 <div class="col">
  <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox(this);toSlide(3)" class="hover-shadow preview">
 </div>
</div>

<div id="Lightbox" class="modal">
 <span class="close pointer" onclick="closeLightbox()">&times;</span>
    
 <div class="modal-content">
  <div class="slide">
   <img id="modal-slides" class="image-slide" alt="END OF SLIDESHOW GROUP" />
  </div>

  <a class="previous" onclick="changeSlide(-1)">&#10094;</a>
  <a class="next" onclick="changeSlide(1)">&#10095;</a>
   </div>
  </div>
 </div>
</div>

JS

var slideIndex = 1;
showSlide(slideIndex);

function openLightbox(element) {
  document.getElementById('Lightbox').style.display = 'block';
  document.getElementById("modal-slides").src = element.src; 
}
function closeLightbox() {
  document.getElementById('Lightbox').style.display = 'none';
}
function changeSlide(n) {
    showSlide(slideIndex += n);
}
function toSlide(n) {
    showSlide(slideIndex = n);
}
function showSlide(n) {
  const slides = document.getElementsByClassName('slide');
  if (n > slides.length) {
    slideIndex = 1; 
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = 'block';
}

我尝试了各种选择，但我的 javascript 知识很差。我很感激任何帮助。

编辑

prettyInPink 我尝试按照您的建议进行操作，示例如下：

CODEPEN

当我通过单击最后一张图片（编号 8）打开模态时，一切正常，但是当打开模态和任何其他图片时，PREV - NEXT 无法正常工作...显示的图像在某种程度上是错误的随机...有什么建议吗？

Answer 1

您可以使用为图像设置的数据属性 data-image 并定位这些图像。

    let _body = document.querySelector('body'),
        galleryImg = document.querySelectorAll('.gallery img'),
        modalWindow = document.getElementById('modal-gall'),
        modalImg = document.getElementById('modal-slides'),
        closeModal = document.getElementById('closem'),
        nextBtn = document.getElementById('nextm'),
        prevBtn = document.getElementById('prevm'),
        curSlide;
    
    galleryImg.forEach((img) => {
      img.addEventListener('click', function() {
        curSlide = Number(this.dataset.image);
        modalImg.src = this.src;
        _body.classList.add('modal-open');
      });
    });

    nextBtn.addEventListener('click', function() {
      curSlide === galleryImg.length ? curSlide = 1 : curSlide += 1
      modalImg.src = document.querySelector('.gallery img[data-image="'+(curSlide)+'"]').src;
    });

    prevBtn.addEventListener('click', function() {
      curSlide === 1 ? curSlide = galleryImg.length : curSlide -= 1
      modalImg.src = document.querySelector('.gallery img[data-image="'+(curSlide)+'"]').src;
    });

    closeModal.addEventListener('click', function(e) {
      e.preventDefault();
      _body.classList.remove('modal-open');
    });

      body {
        font-family: Tahoma, sans-serif;
        margin: 0;
        background-color: #514c5c;
        color: white;
      }
      .gall-container {
          text-align: left;
          padding: 0 2% 0 2%; 
          width: auto;
      }
      .gall-text {
          text-align: left;
          font-size: 16px;
          padding: 50px 5px 2px 5px; 
          width: 100%;
      }
      .gallery {
          display: flex; 
          height: auto; 
          flex-wrap: wrap; 
          justify-content: left; 
          align-content: flex-start; 
          padding: 5px 0 5px 0; 
      }
      .gallery > img {
          max-width: 90vw;
          max-height: 200px;
          cursor: zoom-in;
          display: block;
          padding: 6px; 
      }
      #modal-gall {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        padding: 8px;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.97);
        align-items: center;
        justify-content: center;
      }

      .modal-open #modal-gall {
        display: block;
      }

      .modal-content {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
      }
      #modal-slides {
          display: block;
          max-width:100%; 
          max-height: calc(100vh - 16px);
          margin: auto;
      }
      #closem {
        cursor: pointer;
        color: #9e97b1;
        position: absolute;
        top: 26px;
        right: 0px;
        font-size: 40px;
        font-weight: bold;
        border-radius: 5px 0 0 5px;
        padding: 2px 16px 8px 16px;
        z-index: 2;
        background-color: #29272e;
        text-decoration: none;
      }
      #closem:hover,
      #closem:focus {
        color: red;
        cursor: pointer;
      }
      #prevm,
      #nextm {
        cursor: pointer;
        position: absolute;
        top: 46%;
        width: auto;
        padding: 10px 22px;
        margin-top: -10px;
        color: #9e97b1;
        font-weight: bold;
        font-size: 30px;
        user-select: none;
        -webkit-user-select: none;
        background-color: #29272e;
        text-decoration: none;
      }
      #prevm {
        left: 0;
        border-radius: 0 5px 5px 0;
      }
      #nextm {
        right: 0;
        border-radius: 5px 0 0 5px;
      }
      #prevm:hover,
      #nextm:hover {
        background-color: #322c42;
      }

  <div class="gall-container">
      <div class="gall-text"><b style="color: silver; font-size: 120%;">EXIBITION 02</b>
          <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas mauris rhoncus, aliquam turpis a, tempus erat. Proin sit amet cursus felis. Etiam rhoncus tortor id nunc viverra, sed imperdiet leo congue. Nam tristique elementum gravida. In efficitur odio at lorem pretium, at lobortis dui hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu erat facilisis, ullamcorper mi id, semper libero. Suspendisse iaculis in ipsum sed luctus. Duis cursus varius dui at fringilla. 
          <br><span style="color: #b1afaf; font-size: 80%;">>>  Cras non commodo massa.</span><br>
      </div>
      <div class="gallery">
          <img src="https://i.postimg.cc/sxLJ4WgV/08.jpg" alt="08 Image description" data-image="8">
          <img src="https://i.postimg.cc/vm73wD3z/07.jpg" alt="07 Image description" data-image="7">
          <img src="https://i.postimg.cc/qvyG2zVT/06.jpg" alt="06 Image description" data-image="6">
          <img src="https://i.postimg.cc/MTWt6xL8/05.jpg" alt="05 Image description" data-image="5">
          <div class="gall-text"><b style="color: silver; font-size: 120%;">EXIBITION 01</b> 
              <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas mauris rhoncus, aliquam turpis a, tempus erat. Proin sit amet cursus felis. Etiam rhoncus tortor id nunc viverra, sed imperdiet leo congue. Nam tristique elementum gravida. In efficitur odio at lorem pretium, at lobortis dui hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu erat facilisis, ullamcorper mi id, semper libero. Suspendisse iaculis in ipsum sed luctus. Duis cursus varius dui at fringilla. 
              <br> <span style="color: #b1afaf; font-size: 80%;">>>  Cras non commodo massa.</span><br>
          </div>
          <img src="https://i.postimg.cc/HsJzs66j/04.jpg" alt="04 Image description" data-image="4">
          <img src="https://i.postimg.cc/jq3vbpQG/03.jpg" alt="03 Image description" data-image="3">
          <img src="https://i.postimg.cc/Xqq85L3H/02.jpg" alt="02 Image description" data-image="2">
          <img src="https://i.postimg.cc/C1m7dXyn/01.jpg" alt="01 Image description" data-image="1">
      </div>
      <div id="modal-gall">
          <a href="#close" id="closem">&times;</a>
          <div class="modal-content">
              <img id="modal-slides" alt="">
          </div>
          <a id="prevm">&#10094;</a>
          <a id="nextm">&#10095;</a>
      </div>
  </div>

模式库中的上一个和下一个按钮不起作用

Prev and next buttons in modal gallery doesn't work

javascript

css

modal-dialog

gallery