Detectar valor document.getElementById() dentro de un array

[kahlito]

Hola.

Tengo una galería de imágenes donde intento que cuando el usuario haga click en cada una de ellas se muestre esa misma imagen en grande. Lo logro hacer con su correspondiente "id" y con javascript.

Ejemplo:

Código HTML:

<li><img id="azul" src="img/azul.png" ></li>
<li><img id="amarillo" src="img/amarillo.png" ></li>
<li><img id="verde" src="img/verde.png" ></li>
<li><img id="rojo" src="img/verde.png" ></li>
 

Código Javascript:

<script>
// Get the modal //
var modal = document.getElementById("myModal");
 
 
var img1 = document.getElementById("azul");
var img2 = document.getElementById("amarillo");
var img3 = document.getElementById("verde");
var img3 = document.getElementById("rojo");
 
var modalImg = document.getElementById("img-modal-grande");
var captionText = document.getElementById("caption");
 
//Click en imágenes a mostrar
img1.onclick = function(){  
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
 
img2.onclick = function(){ 
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img3.onclick = function(){  
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img4.onclick = function(){  
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
 
// 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";
}
 
</script>
 

Hasta aquí bien, pero claro si son 20 imágenes e intento hacerlo en un array al intentar coger el valor dentro de document.getElementById() no lo reconoce

Código Javascript:

<script>
 
var modal = document.getElementById("myModal");
 
//Coge el valor para luego devolverlo al hacer onclick
 
 
var myArray = ['azul', 'amarillo', 'verde', 'rojo' ];
 
for(i=0;i<myArray.length;i++){
    
    var img = document.getElementById(myArray[i]);
 
    //Prueba añadiendo de nuevo el valor a id, donde aquí si lo reconoce pero al hacer clien en la imagen luego no hace la fución.
    //var img = document.getElementById(myArray[i]).id = myArray[i];    
 
}
 
var modalImg = document.getElementById("img-modal-grande");
var captionText = document.getElementById("caption");
 
//Click en imágenes a mostrar
img.onclick = function(){  
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
 
 
// 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";
}
 
</script>
 

¿Cómo podría hacer que reconozca el valor del id dentro del array para luego devolverlo o llamarlo al hacer click en cada imagen?

Saludos.