Model Image for gallery function can’t be used on many image

Hello guys so im trying to make model image function for my gallery but I can’t use the function on many image, any suggestion on how fix it ? can I change the var img to collect the element by class name? Thanks before.

Here’s the code:

<div id="myModal" class="modal">
   <span class="close">&times;</span>
   <img class="modal-content" id="img01">
</div>

<div class="container-fluid padding gallerysection text-center" style="padding-bottom:30px;">
  <div class="row padding fadeineffect">
    <div class="col-lg-6">
      <img id="modalImg" src="img/gallery/MR4.jpg" alt="MR Cello 1" class="galleryphoto img-fluid">
    </div>

    <div class="col-lg-6">
      <img src="img/gallery/MR5.jpg" alt="MR Cello 2" class="galleryphoto img-fluid">
    </div>
  </div>
</div>

My CSS Code:

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 850px;
  }

My Java script Code:

// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("modalImg");
var modalImg = document.getElementById("img01");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
}

// 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";
}

Answer

Working with multiple images means working with a collection. For collection work, method forEach works well:

[].forEach.call(img, function (img_curr) {
    img_curr.onclick = function () {
        modal.style.display = "block";
        modalImg.src = this.src;
    };
});

img_curr – the current image from the collection.

Use class modalImg for all img tag.

var modal = document.getElementById("myModal");

var img = document.getElementsByClassName("modalImg");
var modalImg = document.getElementById("img");

[].forEach.call(img, function (img_curr) {
    img_curr.onclick = function () {
        modal.style.display = "block";
        modalImg.src = this.src;
    };
});

var span = document.getElementsByClassName("close")[0];

span.onclick = function () {
    modal.style.display = "none";
};

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 850px;
}

<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img" />
</div>

<div class="container-fluid padding gallerysection text-center" style="padding-bottom: 30px;">
    <div class="row padding fadeineffect">
        <div class="col-lg-6">
            <img
                class="modalImg"
                src="https://lh3.googleusercontent.com/proxy/fl8D7wz4UGOL2OsOcYv_bLp6MBpsC5k_vCp1BhP-pUYcqXlUG1bJuCjRsWAWf2YLPt2pRCiUhd0tf3B4NismlNC5tBl6Ru1XOspcdp4U8ZGr9wCGYEri5ikCWn4YAJEmJNysu8KrlZVpdQ9sfg"
                alt="MR Cello 1"
                class="galleryphoto img-fluid"
            />
        </div>

        <div class="col-lg-6">
            <img
                class="modalImg"
                src="https://lh3.googleusercontent.com/proxy/Y_PJq-iHuV0SwCw7t54ZZnk5WGXT6CLBsq2zsHb9VZnqx3R7M-Yk3_gVnwJa6cfns_x3HNvkuKV-q3e3VtTmQabjIDmazHwva2Bb2JIIxD4XOkRluLI-dm0cz1MDL_8Nd9tt7ACcxu_DAarebw"
                alt="MR Cello 2"
            />
        </div>
    </div>
</div>