Начните с массива картинок, затем отобразите на странице, затем добавьте обработчики событии (открыть нажатую картинку, закрыть)
<!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>
