fixed images

2025-12-03 11:35:49 +01:00
parent f9737fdf73
commit 7a2cac27cd
710 changed files with 53 additions and 7 deletions
@@ -89,7 +89,7 @@
 </head>

 <body>
-    <div class="wrapper">
+    <div class="wrapper toggled">
        <?php include('include/navbar.php'); ?>
        <?php include('include/topbar.php'); ?>

@@ -339,21 +339,43 @@

        });

-        // thumbnail click → open modal with big photo
+        // Apri lightbox
        $(document).on("click", ".thumb-img", function() {
            let full = $(this).data("full");
-            $("#fotoGrande").attr("src", full);
-            $("#fotoModal").modal("show");
+            $("#bigImg").attr("src", full);
+            $("#bigView")
+                .css("display", "flex") // diventa flex
+                .hide()
+                .fadeIn(200); // fade-in elegante
+        });
+
+        // Chiudi cliccando ovunque sull'overlay
+        $(document).on("click", "#bigView", function() {
+            $(this).fadeOut(200, function() {
+                $(this).css("display", "none");
+            });
        });
    </script>
    <!-- MODALE FOTO GRANDE -->
    <div class="modal fade" id="fotoModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content p-0" style="background:transparent; border:none;">
-                <img id="fotoGrande" src="" style="width:100%; border-radius:10px;">
+                <img id="fotoGrande" src="" style="width:60vw; max-height:80vh; object-fit:contain; border-radius:10px;">
            </div>
        </div>
    </div>
+    <div id="bigView"
+        style="display:none; 
+            position:fixed; 
+            top:0; left:0; 
+            width:100vw; height:100vh; 
+            background:rgba(0,0,0,0.9); 
+            z-index:9999; 
+            justify-content:center; 
+            align-items:center;">
+        <img id="bigImg" src=""
+            style="max-width:70vw; max-height:90vh; border-radius:12px;">
+    </div>

 </body>