It seems like your question is more along the lines of "Is there anyone here cool enough to code something for me?" isn't it?

I decided to take it as a fun exercise to complete, especially since Turnip had already contributed a lot on your previous question. I thought it would be nice to encourage someone on their first day working with Javascript.
But who knows if you'll get this lucky in the future!
;)

Essentially, what this code does is assign an onclick function to all your thumbnails to display the corresponding larger image in your modal. It also initiates the opening of your modal with the click on the first thumbnail.
This part was done by Turnip.
Note that these thumbnail images must now have the "GalleryImg" class.
I made this addition to Turnip's version to exclude your back and forward buttons from the loop, since they are also considered images.

For your back and forward buttons, I incorporated a hidden input which serves as a memory slot holding the currently displayed image in the modal.
Hence, it's important that the thumbnails are all assigned an id that follows a "zero-based" sequence: The first thumbnail id should be img-0.
With this information, your back and forward buttons can determine the id number of the image you want to display based on the button clicked.

Oh, I also anticipated your potential next question – how to restart from the first image once the last one has been reached, and vice versa.
Try to identify which lines handle this scenario! ;)

Here is the code:

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <div class="backButton" id="bckBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Back" style="width:100%; float:left"></div>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
  <div class="forwardButton" id="fwdBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Forward" style="width:100%; float:right;"></div>
  <input type="hidden" id="mem">
</div>

<img class="GalleryImg" id="img-0" src="../path/to/image1" alt="alternate text 1"><div>caption text 1</div>
<img class="GalleryImg" id="img-1" src="../path/to/image2" alt="alternate text 2"><div>caption text 2</div>
<img class="GalleryImg" id="img-2" src="../path/to/image3" alt="alternate text 3"><div>caption text 3</div>
<img class="GalleryImg" id="img-3" src="../path/to/image4" alt="alternate text 4"><div>caption text 4</div>
<!-- and so forth... -->

<script>
var modal = document.getElementById('myModal');

var span = document.getElementsByClassName("close")[0];
span.onclick = function() { 
    modal.style.display = "none";
}

var backButton = document.getElementById('bckBtn');
var forwardButton = document.getElementById('fwdBtn');
var images = document.getElementsByClassName('GalleryImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;
for (i = 0; i < images.length; i++) {
   images[i].onclick = function(){
       modal.style.display = "block";
       var src = this.src;
       var filename = src.substring(src.lastIndexOf('/')+1);
       var filepath = src.substring(0, src.lastIndexOf('/')+1);
       modalImg.src = filepath + 'large-' + filename;
       modalImg.alt = this.alt;
       captionText.innerHTML = this.nextElementSibling.innerHTML;
       document.getElementById("mem").value=this.id;
   }
}

backButton.onclick = function(){
    ImageId = document.getElementById("mem").value.split("-");
    PreviousImage = parseInt(ImageId[1])-1;
    if(PreviousImage<0){PreviousImage=images.length-1;}
    images[PreviousImage].click();
}

forwardButton.onclick = function(){
    ImageId = document.getElementById("mem").value.split("-");
    NextImage = parseInt(ImageId[1])+1;
    if(NextImage>=images.length-1){NextImage=0;}
    images[NextImage].click();
}
</script>

EDIT (2016-05-03)

To reverse the numbering of ids, as requested in the comments below, making them look like this:

<!-- Future images to be added here-->
<img class="GalleryImg" id="img-3" src="../path/to/image4" alt="alternate text 4"><div>caption text 4</div>
<img class="GalleryImg" id="img-2" src="../path/to/image3" alt="alternate text 3"><div>caption text 3</div>
<img class="GalleryImg" id="img-1" src="../path/to/image2" alt="alternate text 2"><div>caption text 2</div>
<img class="GalleryImg" id="img-0" src="../path/to/image1" alt="alternate text 1"><div>caption text 1</div>

An array of the images elements needs to be reversed... Since the ids are linked to the position of the target image in an array of elements.
Then, the logic of the back and forward buttons needs to be reversed as well.

Use the following code:

// Create a "reversed" images array
var imagesReversed = [];    
var i = images.length;
while(i--){
    imagesReversed.push(images[i]);
}

// Increment by 1 from the current id to get the targeted image position in the reversed array.
backButton.onclick = function(){
    ImageId = document.getElementById("mem").value.split("-");
    PreviousImage = parseInt(ImageId[1])+1;
    if(PreviousImage>images.length-1){PreviousImage=0;}
    imagesReversed[PreviousImage].click();
}

// Decrement by 1 from the current id to get the targeted image position in the reversed array.
forwardButton.onclick = function(){
    ImageId = document.getElementById("mem").value.split("-");
    NextImage = parseInt(ImageId[1])-1;
    if(NextImage<0){NextImage=images.length-1;}
    imagesReversed[NextImage].click();
}