Я хотел бы, чтобы у меня была возможность увеличивать картинку по нажатию как в рандомных картинках, так и в поиску, я бы хотел, чтобы меня было как в этом примере https://playcode.io/916548, но я не понял, как это реализовать в мой код, я пытался, но у меня не получилось, помогите пожалуйста
const requestURL = 'https://api.unsplash.com/search/photos?page=1&per_page=20&client_id=Dn8-42Jk1UNg4-nIQbG_xlewlntyxqNTU2laqw9yWCs';
const randomImages = 'https://api.unsplash.com/photos/random/?client_id=Dn8-42Jk1UNg4-nIQbG_xlewlntyxqNTU2laqw9yWCs&count=100';
const searchImages = document.querySelector('form');
const input = document.querySelector('input');
const images = document.querySelector('.images');
function searchStart() {
images.innerHTML = '';
input.value = '';
}
fetch(randomImages)
.then(response => response.json())
.then(data => {
if(data) {
data.forEach(item => {
images.innerHTML += showRandomImages(item)
});
}
})
function showRandomImages(data) {
return `
<div class="data">
<img src='${data.urls.regular}'>
<a href='${data.links.html}' target='_blank' class='link'>${data.description ? data.description : ''}</a>
<a href='${data.links.html}' target='_blank' class='user'>Photo by: ${data.user.name ? data.user.name : ''}</a>
</div>
`
}
function search(searchImg) {
let url = `${requestURL}&query=${searchImg}`;
return fetch(url)
.then(response => response.json())
.then(result => {
return result.results;
});
}
function showImages(data) {
images.innerHTML = '';
data.forEach(item => {
let image = document.createElement('div');
image.className = 'showImage';
image.innerHTML = `
<img src='${item.urls.regular}'>
<a href='${item.links.html}' target='_blank' class='link'>${item.description ? item.description : ''}</a>
<a href='${item.links.html}' target='_blank' class='user'>Photo by: ${item.user.name ? item.user.name : ''}</a>
`
images.appendChild(image);
});
}
searchImages.addEventListener('submit', (event) => {
// if (input.value === '') {
// alertify.error('Enter the title!')
// }
event.preventDefault();
let searchImg = input.value;
searchStart();
search(searchImg)
.then(showImages)
});
body {
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #111;
width: 80%;
max-width: 1600px;
margin: 4em auto 0 auto;
}
h1 {
text-align: center;
margin-top: 0;
font-weight: 300;
font-size: 60px;
line-height: 1.2;
letter-spacing: -.1rem;
}
form {
display: flex;
width: 570px;
height: 40px;
justify-content: center;
align-items: center;
background-color: #212121;
border-radius: 20px;
padding: 10px;
margin-left: 320px;
margin-bottom: 50px;
}
.input-search input {
width: 425px;
height: 28px;
border-radius: 20px;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
}
.input-search {
width: 500px;
}
input[type="text"] {
width: 450px;
height: 40px;
padding: 10px 10px;
background-color:aliceblue;
border: 2px solid #d1d1d1;
border-radius: 20px;
box-shadow: none;
box-sizing: border-box;
margin-left: 5px;
}
.button, button[type="submit"] {
display:inline-block;
height: 40px;
padding: 0 30px;
font-size: 15px;
text-decoration: none;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
margin: 15px;
transition: 0.5s;
background-size: 200% auto;
color: black;
border-radius: 10px;
}
.button, button[type="submit"]:hover {
background-position: right center;
color: #fff;
text-decoration: none;
cursor: pointer;
border-radius: 10px;
}
img {
object-fit:cover;
width: 350px;
height: 350px;
padding: 4px 14px 42px 4px;
margin-left: 34px;
}
.data {
float: left;
position: relative;
}
.data a {
position: absolute;
color: white;
text-decoration: none;
font-weight: 600;
text-shadow: 0 0 5px black;
}
.showImage {
float: left;
position: relative;
}
.showImage a {
position: absolute;
color: white;
text-decoration: none;
font-weight: 600;
text-shadow: 0 0 5px black;
}
.link {
left: 45px;
top: 8px;
font-size: 15px;
}
.user {
left: 45px;
bottom: 50px;
font-size: 15px;
}
.images {
font-size: 15px;
padding-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
<script src="https://kit.fontawesome.com/02f0ec4094.js" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="alertify/css/alertify.min.css" />
<link rel="stylesheet" href="alertify/css/themes/default.min.css" />
<link rel="stylesheet" href="alertify/css/themes/adaptive_default.min.css" /> -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>Unsplash Images</title>
</head>
<body>
<h1>Unsplash Images Gallery</h1>
<form>
<div class="input-search">
<input type="text" id="search" placeholder="Search image..." autocomplete="on">
</div>
<button type="submit"><i class="fas fa-search"></i></button>
</form>
<div class="images">
</div>
<!-- <script src="alertify/js/alertify.min.js"></script> -->
<script src="script.js"></script>
</div>
</body>
</html>