Fabio/my_gallery
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Fabio 2026-02-21 09:20:13 +01:00
commit 93d56a4725
2 changed files with 138 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
app.js Normal file
View file

@ -0,0 +1,58 @@
const API_URL = 'https://prova.patachina.it/photos';
async function loadPhotos() {
const res = await fetch(API_URL);
if (!res.ok) {
console.error('Errore nel fetch', res.status);
return;
}
const data = await res.json();
renderGallery(data);
}
function renderGallery(photos) {
const gallery = document.getElementById('gallery');
gallery.innerHTML = '';
photos.forEach(photo => {
const thumbDiv = document.createElement('div');
thumbDiv.className = 'thumb';
const img = document.createElement('img');
// anteprima
img.src = `https://prova.patachina.it/${photo.thub1}`;
img.alt = photo.name || '';
thumbDiv.appendChild(img);
// click: apri immagine grande
thumbDiv.addEventListener('click', () => {
openModal(`https://prova.patachina.it/${photo.path}`);
});
gallery.appendChild(thumbDiv);
});
}
// Modal
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modalImage');
const modalClose = document.getElementById('modalClose');
function openModal(src) {
modalImg.src = src;
modal.classList.add('open');
}
function closeModal() {
modal.classList.remove('open');
modalImg.src = '';
}
modalClose.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});
// avvio
loadPhotos();

80
index.html Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<title>Galleria foto</title>
<style>
body { font-family: sans-serif; margin: 0; padding: 0; }
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 8px;
padding: 8px;
}
.thumb {
cursor: pointer;
overflow: hidden;
border-radius: 4px;
border: 1px solid #ddd;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Modal */
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal.open {
display: flex;
}
.modal-content {
max-width: 90vw;
max-height: 90vh;
position: relative;
}
.modal-content img {
max-width: 100%;
max-height: 100%;
display: block;
}
.modal-close {
position: absolute;
top: -10px;
right: -10px;
background: #fff;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: bold;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1 style="margin: 8px;">Galleria foto</h1>
<div id="gallery" class="gallery"></div>
<!-- Modal -->
<div id="modal" class="modal">
<div class="modal-content">
<div class="modal-close" id="modalClose">×</div>
<img id="modalImage" src="" alt="">
</div>
</div>
<script src="app.js"></script>
</body>
</html>