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

4

Browse source
This commit is contained in:
Fabio 2026-02-21 16:50:07 +01:00
parent a7e1440630
commit b6a0111217
2 changed files with 39 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app.js
View file

@ -117,6 +117,7 @@ function openModal(srcOriginal, srcPreview, photo) {
img.src = srcPreview; img.src = srcPreview;
img.style.maxWidth = "100%"; img.style.maxWidth = "100%";
img.style.maxHeight = "100%"; img.style.maxHeight = "100%";
img.style.objectFit = "contain";
container.appendChild(img); container.appendChild(img);
const full = new Image(); const full = new Image();

58
style.css
View file

@ -24,6 +24,7 @@ header {
border-radius: 4px; border-radius: 4px;
border: 1px solid #ddd; border: 1px solid #ddd;
background: white; background: white;
position: relative;
} }
.thumb img { .thumb img {
@ -33,6 +34,22 @@ header {
display: block; display: block;
} }
/* Icona play per i video */
.video-thumb {
position: relative;
}
.play-icon {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0,0,0,0.6);
color: white;
padding: 4px 6px;
border-radius: 4px;
font-size: 14px;
}
/* Modal */ /* Modal */
.modal { .modal {
position: fixed; position: fixed;
@ -48,15 +65,31 @@ header {
display: flex; display: flex;
} }
/* 🔥 FIX IMPORTANTE: il modal ha dimensione fissa */
.modal-content { .modal-content {
max-width: 90vw; width: 90vw;
max-height: 90vh; height: 90vh;
position: relative; position: relative;
display: flex;
justify-content: center;
align-items: center;
} }
.modal-content img { /* 🔥 FIX: contenitore media sempre a dimensione piena */
max-width: 100%; #modalMediaContainer {
max-height: 100%; width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* 🔥 FIX: preview e full-res occupano lo stesso spazio */
#modalMediaContainer img,
#modalMediaContainer video {
width: 100%;
height: 100%;
object-fit: contain;
display: block; display: block;
} }
@ -140,18 +173,3 @@ header {
background: #ddd; background: #ddd;
outline: none; outline: none;
} }
.video-thumb {
position: relative;
}
.play-icon {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0,0,0,0.6);
color: white;
padding: 4px 6px;
border-radius: 4px;
font-size: 14px;
}