Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.05.2019, 20:11
Аспирант
Отправить личное сообщение для nathan111777 Посмотреть профиль Найти все сообщения от nathan111777
 
Регистрация: 12.05.2019
Сообщений: 44

Сделать из 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;
}

Как написать код чтобы работал?
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2019, 22:15
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,708

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

<!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>

Последний раз редактировалось Malleys, 12.05.2019 в 22:18.
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2019, 22:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,773

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";
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывести имя полученной функции Teamur Общие вопросы Javascript 20 01.07.2017 09:11
Структурирование множества функций NO_ONE Общие вопросы Javascript 4 20.09.2016 23:38
Как отлаживать события? Или как сделать трассировку вызовов функций? gennad Events/DOM/Window 1 18.08.2010 12:21
Как получить список пользовательских функций объекта window? Маэстро Events/DOM/Window 13 03.07.2010 12:20
Помогите сделать такое меню(( Lilith Я не знаю javascript 2 02.06.2009 01:31