Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Сделать из 25 функций одну. (https://javascript.ru/forum/misc/77488-sdelat-iz-25-funkcijj-odnu.html)

nathan111777 12.05.2019 20:11
Сделать из 25 функций одну.
 
Здраствуйте.На сайте есть 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;
}

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

Malleys 12.05.2019 22:15
Начните с массива картинок, затем отобразите на странице, затем добавьте обработчики событии (открыть нажатую картинку, закрыть)

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
</head>

<body>
	<h4 class="pt">ПОРТФОЛИО</h4>
	<section id="photos"></section>

	<figure id="my-modal" hidden>
		<button class="close">×</button>
		<img>
		<figcaption></figcaption>
	</figure>

<!--	<button onclick="topFunction4Section()" class="myBtn4" title="Вниз">❯</button>-->
	
	<script>
		
		const imageURLs = [
			"https://picsum.photos/id/101/500/500",
			"https://picsum.photos/id/102/500/500",
			"https://picsum.photos/id/103/500/500",
			"https://picsum.photos/id/104/500/500",
			"https://picsum.photos/id/106/500/500",
			"https://picsum.photos/id/107/500/500",
			"https://picsum.photos/id/108/500/500",
			"https://picsum.photos/id/109/500/500",
			"https://picsum.photos/id/110/500/500",
			"https://picsum.photos/id/111/500/500",
			"https://picsum.photos/id/112/500/500",
			"https://picsum.photos/id/113/500/500",
			"https://picsum.photos/id/114/500/500",
			"https://picsum.photos/id/115/500/500",
			"https://picsum.photos/id/116/500/500",
			"https://picsum.photos/id/117/500/500",
			"https://picsum.photos/id/118/500/500",
			"https://picsum.photos/id/119/500/500",
			"https://picsum.photos/id/120/500/500",
			"https://picsum.photos/id/121/500/500",
			"https://picsum.photos/id/122/500/500",
			"https://picsum.photos/id/123/500/500",
			"https://picsum.photos/id/124/500/500",
			"https://picsum.photos/id/125/500/500",
			"https://picsum.photos/id/126/500/500"
		];
		
		const images = imageURLs.map(url => {
			const image = new Image();
			image.src = url;
			image.tabIndex = 0;
			return image;
		});
		
		document.querySelector("section#photos").append(...images);
		
		document.addEventListener("click", event => {
			if(event.target.matches("#photos img")) {
				document.querySelector("#my-modal").hidden = false;
				document.querySelector("#my-modal img").src = event.target.src;
				document.querySelector("#my-modal figcaption").textContent = event.target.src;
			}
			
			if(event.target.matches("#my-modal button.close")) {
				document.querySelector("#my-modal").hidden = true;
			}
		});
		
	</script>
	
	<style>
		
		#photos {
			display: flex;
			flex-wrap: wrap;
		}
		
		#photos img {
			max-width: 150px;
			max-height: 150px;
		}
		
		#my-modal {
			position: fixed;
			background: rgba(0, 0, 0, 0.75);
			top: 0;
			bottom: 0;
			right 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: white;
		}
		
		#my-modal[hidden] {
			display: none;
		}
		
		#my-modal button {
			all: unset;
			position: absolute;
			top: 0;
			right: 0;
			color: white;
			padding: .25em;
			font-size: 400%;
			opacity: .5;
		}
		
		#my-modal figcaption {
			padding: .5em;
			font-family: "SF Pro Text", "Helvetica Neue", system-ui;
		}
		
		#my-modal img {
			border-radius: .2em;
			box-shadow: 0 0.25em 3em rgba(0, 0, 0, 0.5);
			max-width: 95%;
			max-height: 95%;
		}
		
	</style>

</body></html>

рони 12.05.2019 22:21
nathan111777,
//MODAL IMAGE PORTFOLIO
// Get the modal
var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

document.addEventListener('click', ({target}) => {
    if(target.closest('.foto-portfolio')){
    modal.style.display = "block";
    modalImg.src = target.src;
    captionText.innerHTML = target.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";
}


Часовой пояс GMT +3, время: 14:40.