solocla/zibo-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

photo popup update with zoom photo

Browse Source
This commit is contained in:
Claudio 2025-03-31 15:22:27 +02:00
parent 489226f13a
commit 6bec7bca15
1 changed files with 76 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
public/userarea/photos_popup.php
View File

@ -105,7 +105,7 @@ $result->saveToFile($qrCodeFile);
<div class="photo-item" data-photo-id="<?= $photo['id'] ?>" style="display: flex; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px;">
<div style="flex: 1;">
<?php if ($fileExists): ?>
<img src="../photostrf/<?= htmlspecialchars($photo['file_path']) ?>" alt="<?= htmlspecialchars($photo['file_name']) ?>" style="max-width: 100px; max-height: 100px; margin-right: 10px;">
<img src="../photostrf/<?= htmlspecialchars($photo['file_path']) ?>" alt="<?= htmlspecialchars($photo['file_name']) ?>" class="thumbnail" style="max-width: 100px; max-height: 100px; margin-right: 10px; cursor: pointer;">
<?php else: ?>
<p style="color: red;">[File non trovato]</p>
<?php endif; ?>
@ -122,6 +122,12 @@ $result->saveToFile($qrCodeFile);
<?php endforeach; ?>
<?php endif; ?>
</div>
<!-- Modale per l'immagine ingrandita -->
<div id="imageModal" class="image-modal" style="display: none;">
<span class="image-modal-close">&times;</span>
<img id="enlargedImage" class="image-modal-content" src="" alt="Immagine ingrandita">
</div>
</div>
<style>
@ -137,4 +143,72 @@ $result->saveToFile($qrCodeFile);
border-color: #28a745;
background-color: #e9ecef;
}
/* Stile per il modale dell'immagine ingrandita */
.image-modal {
display: none;
position: fixed;
z-index: 1001;
/* Sopra il popup principale */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}
.image-modal-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 90vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image-modal-close {
position: absolute;
top: 15px;
right: 35px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
.image-modal-close:hover,
.image-modal-close:focus {
color: #bbb;
text-decoration: none;
}
</style>
<script>
// Gestione del click sulle immagini per ingrandirle
document.querySelectorAll('.thumbnail').forEach(img => {
img.addEventListener('click', function() {
const modal = document.getElementById('imageModal');
const enlargedImage = document.getElementById('enlargedImage');
enlargedImage.src = this.src;
modal.style.display = 'block';
});
});
// Gestione della chiusura del modale
const modal = document.getElementById('imageModal');
const closeBtn = document.querySelector('.image-modal-close');
closeBtn.addEventListener('click', function() {
modal.style.display = 'none';
});
// Chiudi il modale cliccando fuori dall'immagine
modal.addEventListener('click', function(event) {
if (event.target === modal) {
modal.style.display = 'none';
}
});
</script>