From 6cbc876cc2be60f6c7dcf90d12dd317be36b2832 Mon Sep 17 00:00:00 2001
From: Esenjin <esenjin@sangigi-fuchsia.fr>
Date: Mon, 30 Dec 2024 21:18:25 +0100
Subject: [PATCH] correction du chargement des images

mansory et loading lazy ne se marchent plus dessus (normalement)
---
 galeries.php | 39 +++++++++++++++++++++++++++++++--------
 styles.css   |  5 +----
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/galeries.php b/galeries.php
index 188ba13..b730337 100644
--- a/galeries.php
+++ b/galeries.php
@@ -66,15 +66,38 @@ if (!isSecurePath($parentPath)) {
    </div>
 
    <div class="gallery-grid" id="gallery-grid">
-       <?php foreach($images as $image): ?>
-       <div class="gallery-item">
-           <a href="partage.php?image=<?php echo urlencode($image); ?>">
-               <img src="<?php echo htmlspecialchars($image); ?>" alt="Image de la galerie" loading="lazy">
-           </a>
-       </div>
-       <?php endforeach; ?>
-   </div>
+    <?php foreach($images as $image): ?>
+    <div class="gallery-item">
+        <a href="partage.php?image=<?php echo urlencode($image); ?>">
+            <img src="<?php echo htmlspecialchars($image); ?>" 
+                 alt="Image de la galerie" 
+                 loading="lazy"
+                 onload="this.parentElement.parentElement.style.opacity = '1'">
+        </a>
+    </div>
+    <?php endforeach; ?>
+</div>
 
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const grid = document.querySelector('#gallery-grid');
+    
+    // Initialiser Masonry immédiatement sans attendre le chargement des images
+    const masonry = new Masonry(grid, {
+        itemSelector: '.gallery-item',
+        columnWidth: '.gallery-item',
+        gutter: 20,
+        fitWidth: true
+    });
+    
+    // Réorganiser la grille quand une image est chargée
+    grid.addEventListener('load', function(e) {
+        if (e.target.tagName === 'IMG') {
+            masonry.layout();
+        }
+    }, true);
+});
+</script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
    <script>
diff --git a/styles.css b/styles.css
index 1b85ee9..9b91012 100644
--- a/styles.css
+++ b/styles.css
@@ -216,10 +216,6 @@ p {
     margin: 0 auto;
 }
 
-.gallery-grid.is-loading .gallery-item {
-    opacity: 0;
-}
-
 .gallery-grid .gallery-item {
     opacity: 1;
     transition: opacity 0.3s ease;
@@ -232,6 +228,7 @@ p {
     border-radius: 8px;
     overflow: hidden;
     background-color: #1e1e1e;
+    opacity: 0;
     transition: transform 0.3s ease;
 }