title: Displaying custom fields on a lightbox gallery
body: <p>I want to replicate this gallery:</p>
  
  <p><a href="https://www.w3schools.com/howto/howto_js_lightbox.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_lightbox.asp</a></p>
  
  <p>But instead of the static pictures, i need it to display the contents of my "gallery" field in Advanced Custom fields.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;?php 
  
  $images = get_field('extra_photos');
  
  if( $images ): ?&gt;
  &lt;div class="row2"&gt;
  &lt;?php foreach( $images as $image ): ?&gt;
  &lt;div class="column2"&gt;
      &lt;img src="&lt;?php echo $image['url']; ?&gt;" alt="&lt;?php echo $image['alt']; ?&gt;" onclick="openModal();currentSlide(1)" class="hover-shadow2"&gt;
    &lt;/div&gt;
  &lt;?php endforeach; ?&gt;    
  
  
  &lt;!-- Images used to open the lightbox --&gt;
  
  &lt;/div&gt;
  
  &lt;!-- The Modal/Lightbox --&gt;
  &lt;div id="myModal2" class="modal2"&gt;
    &lt;span class="close2 cursor" onclick="closeModal()"&gt;&amp;times;&lt;/span&gt;
    &lt;div class="modal-content2"&gt;
  
      &lt;div class="mySlides2"&gt;
        &lt;div class="numbertext2"&gt;1 / 4&lt;/div&gt;
        &lt;img src="&lt;?php echo $image['url']; ?&gt;" alt="&lt;?php echo $image['alt']; ?&gt;" style="width:100%"&gt;
      &lt;/div&gt;
  
  
      &lt;!-- Next/previous controls --&gt;
      &lt;a class="prev" onclick="plusSlides(-1)"&gt;&amp;#10094;&lt;/a&gt;
      &lt;a class="next" onclick="plusSlides(1)"&gt;&amp;#10095;&lt;/a&gt;
  
      &lt;!-- Caption text --&gt;
      &lt;div class="caption-container2"&gt;
        &lt;p id="caption2"&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;!-- Thumbnail image controls --&gt;
      &lt;div class="column2"&gt;
        &lt;img class="demo2" src="&lt;?php echo $image['url']; ?&gt;" alt="&lt;?php echo $image['alt']; ?&gt;" onclick="currentSlide(1)" alt="Nature"&gt;
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;?php endif; ?&gt;
  </code></pre>
  
  <p>It only displays the first image of the gallery.</p>
  
  <p>You can see it in action here:</p>
  
  <p><a href="http://electives-abroad.org/hospital-internships-and-electives-at-mkoani-hospital-on-pemba-island/" rel="nofollow noreferrer">http://electives-abroad.org/hospital-internships-and-electives-at-mkoani-hospital-on-pemba-island/</a></p>
  
  <p>How can i solve it? </p>
  
  <p><em>UPDATE</em></p>
  
  <p>Here is the Javascript:</p>
  
  <pre><code>&lt;script&gt;
  // 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 &gt; slides.length) {slideIndex = 1}
    if (n &lt; 1) {slideIndex = slides.length}
    for (i = 0; i &lt; slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i &lt; 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;
  }
  &lt;/script&gt;
  </code></pre>