[nathan111777]

Здраствуйте.На сайте есть 25 картинок, хотел чтобы при клике мишью по картинке она становилась большой, почти на весь екран.Впринципе мой код работает но на каждую картинку своя функция, тоесть 25 функций. Хотел сделать одну функцию для всех картинок.Создал массив изображений и пытался связать с функцией которая делает большими картинки, но код не работает.Подскажите как это реализовать.

это рабочий код с 25 функциями:

<h4 class="pt">ПОРТФОЛИО</h4>
<div class="foto-container">
 <img class="foto-portfolio" src="main/1.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/2.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/3.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/4.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/5.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/6.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/7.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/8.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/9.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/10.jpg"style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/11.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/12.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/13.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/14.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/15.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/16.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/17.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/18.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/19.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/20.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/21.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/22.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/23.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/24.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="main/25.jpg" style="width:100%;max-width:300px">
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal-portfolio">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
<div class="portfolio-button">
<button onclick="topFunction4Section()" class="myBtn4" title="Вниз">❯</button>
</div>

//MODAL IMAGE PORTFOLIO
// Get the modal
var modal = document.getElementById('myModal');


var img = document.getElementsByClassName("foto-portfolio")[0];
var img2 = document.getElementsByClassName("foto-portfolio")[1];
var img3 = document.getElementsByClassName("foto-portfolio")[2];
var img4 = document.getElementsByClassName("foto-portfolio")[3];
var img5 = document.getElementsByClassName("foto-portfolio")[4];
var img6 = document.getElementsByClassName("foto-portfolio")[5];
var img7 = document.getElementsByClassName("foto-portfolio")[6];
var img8 = document.getElementsByClassName("foto-portfolio")[7];
var img9 = document.getElementsByClassName("foto-portfolio")[8];
var img10 = document.getElementsByClassName("foto-portfolio")[9];
var img11 = document.getElementsByClassName("foto-portfolio")[10];
var img12 = document.getElementsByClassName("foto-portfolio")[11];
var img13 = document.getElementsByClassName("foto-portfolio")[12];
var img14 = document.getElementsByClassName("foto-portfolio")[13];
var img15 = document.getElementsByClassName("foto-portfolio")[14];
var img16 = document.getElementsByClassName("foto-portfolio")[15];
var img17 = document.getElementsByClassName("foto-portfolio")[16];
var img18 = document.getElementsByClassName("foto-portfolio")[17];
var img19 = document.getElementsByClassName("foto-portfolio")[18];
var img20 = document.getElementsByClassName("foto-portfolio")[19];
var img21 = document.getElementsByClassName("foto-portfolio")[20];
var img22 = document.getElementsByClassName("foto-portfolio")[21];
var img23 = document.getElementsByClassName("foto-portfolio")[22];
var img24 = document.getElementsByClassName("foto-portfolio")[23];
var img25 = document.getElementsByClassName("foto-portfolio")[24];

var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");


img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img2.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img2.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img3.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img4.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img5.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img6.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img7.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img8.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img9.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img10.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img11.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img12.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img13.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img14.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img15.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img16.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}


img17.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img18.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img19.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img20.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img21.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img22.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img23.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img24.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img25.onclick = function(){
  modal.style.display = "block";
  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";
}

а это я пробовал создать массив изображений и связать его с функцией, но не работает:

var names = ['main/1.jpg', 'main/2.jpg', 'main/3.jpg']; 
 
var arrayImage = []; 
for var j = 0, J = names.length; j < J; j++)
   {
   arrayImage [j] = new Image ();
   arrayImage [j].src = names [j];
   }

names= function([0],[1],[2]).onclick{
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

Как написать код чтобы работал?