So the last few days I've been trying to figure it out with what you've told me but...
Here's my thinking process:
// Get the modal - creating the variable "modal"
var modal = document.getElementById('myModal');
this refers to:
<!-- The Modal -->
<div id="myModal" class="modal">
Create var images = a document with my 12 pictures (with class "image"):
// Get the image and insert it inside the modal - use its "alt" text as a caption
var images = document.getElementsByClassName("image");
Clicking on one of the images starts the function showCaption:
for(var i = 0; i < images.length; i++) {images[i].onclick = showCaption;}
The function calls the modal and (here I'm not sure) says the modal image is the src from modalImg
function showCaption(){
modal.style.display = "block";
modalImg.src = this.src;}
The var modalImg is a doc filled with img01
var modalImg = document.getElementById("img01");
Here we have img01 defined (and I think this is where I screw up).
I've tried adding src="", I've tried adding src="images/pic07.jpg" (so with image linked), I've tried adding class"image", nothing works.
I believe I have te refer to the images here somehow, just can't figure out how ... Hariskars example above seems to refer to a random src...
<!-- Modal Content (The Image) -->
<img src="" alt="" class="modal-content" id="img01">
And the rest is for closing and adding the caption...
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {modal.style.display = "none";}
modal.onclick = function() {modal.style.display = "none";}
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>