matrixhasyou-site/js/gallery.js

41 lines
950 B
JavaScript
Executable file

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Галерея</title>
<link rel="stylesheet" href="css/style.css">
<style>
.gallery { display: flex; flex-wrap: wrap; }
.gallery img {
width: 200px;
margin: 5px;
border: 2px solid #0F0;
transition: 0.3s;
}
.gallery img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<h1> Галерея</h1>
<div class="gallery" id="gallery"></div>
<script>
fetch('/photos/')
.then(res => res.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const links = [...doc.querySelectorAll('a')]
.map(a => a.href)
.filter(href => /\.(jpg|jpeg|png|gif)$/i.test(href));
const gallery = document.getElementById('gallery');
links.forEach(link => {
const img = document.createElement('img');
img.src = link;
gallery.appendChild(img);
});
});
</script>
</body>
</html>