photo popup update with zoom photo

public/userarea/photos_popup.php

@@ -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;
     }
-</style>
+
+    /* 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>