在灯箱图库上显示自定义字段

Question

我想复制这个画廊：

https://www.w3schools.com/howto/howto_js_lightbox.asp

但是，我需要它来显示“自定义”字段中“画廊”字段的内容，而不是静态图片。

这是我的代码：

<?php 

$images = get_field('extra_photos');

if( $images ): ?>
<div class="row2">
<?php foreach( $images as $image ): ?>
<div class="column2">
    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" onclick="openModal();currentSlide(1)" class="hover-shadow2">
  </div>
<?php endforeach; ?>    


<!-- Images used to open the lightbox -->

</div>

<!-- The Modal/Lightbox -->
<div id="myModal2" class="modal2">
  <span class="close2 cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content2">

    <div class="mySlides2">
      <div class="numbertext2">1 / 4</div>
      <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" style="width:100%">
    </div>


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

    <!-- Caption text -->
    <div class="caption-container2">
      <p id="caption2"></p>
    </div>

    <!-- Thumbnail image controls -->
    <div class="column2">
      <img class="demo2" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" onclick="currentSlide(1)" alt="Nature">
    </div>


  </div>
</div>
<?php endif; ?>

它仅显示画廊的第一张图像。

您可以在此处查看其运行情况：

http://electives-abroad.org/hospital-internships-and-electives-at-mkoani-hospital-on-pemba-island/

我该如何解决？

更新

这是Javascript：

<script>
// Open the Modal
function openModal() {
  document.getElementById('myModal2').style.display = "block";
}

// Close the Modal
function closeModal() {
  document.getElementById('myModal2').style.display = "none";
}

var 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) {
  var i;
  var slides = document.getElementsByClassName("mySlides2");
  var dots = document.getElementsByClassName("demo2");
  var captionText = document.getElementById("caption2");
  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>