gallery optimizaiton

generate_thumbnails.py

@@ -0,0 +1,49 @@
+import os
+from PIL import Image
+
+def create_thumbnails(base_folder):
+    if not os.path.exists(base_folder):
+        print(f"Folder {base_folder} does not exist.")
+        return
+
+    thumb_dir = os.path.join(base_folder, "thumbnails")
+    os.makedirs(thumb_dir, exist_ok=True)
+
+    count = 0
+    for filename in os.listdir(base_folder):
+        ext = filename.split('.')[-1].lower()
+        if ext not in ['jpg', 'jpeg', 'png', 'gif']:
+            continue
+            
+        filepath = os.path.join(base_folder, filename)
+        if not os.path.isfile(filepath):
+            continue
+
+        base_name = filename.split('.')[0]
+        # Always save thumbnail as jpg
+        thumb_path = os.path.join(thumb_dir, f"{base_name}.jpg")
+        
+        # If thumbnail already exists, skip
+        if os.path.exists(thumb_path):
+            continue
+            
+        try:
+            with Image.open(filepath) as img:
+                # Convert to RGB if necessary (e.g., for RGBA PNGs or GIFs)
+                if img.mode != 'RGB':
+                    img = img.convert('RGB')
+                
+                # Resize keeping aspect ratio
+                # Set a max dimension (e.g., 400x400)
+                img.thumbnail((400, 400))
+                img.save(thumb_path, "JPEG", quality=85)
+                count += 1
+                print(f"Created thumbnail for {filename}")
+        except Exception as e:
+            print(f"Failed to process {filename}: {e}")
+            
+    print(f"Created {count} thumbnails in {base_folder}")
+
+if __name__ == "__main__":
+    create_thumbnails("gallery")
+    create_thumbnails("ahmet")

index.html

@@ -96,5 +96,11 @@
     <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script>
     <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore-compat.js"></script>
     <script src="js/comments.js"></script>
+
+    <!-- Lightbox -->
+    <div id="lightbox" class="lightbox">
+      <span class="lightbox-close">&times;</span>
+      <img class="lightbox-content" id="lightbox-img">
+    </div>
     </body>
 </html>

js/gallery.js

@@ -1,4 +1,26 @@
 document.addEventListener('DOMContentLoaded', () => {
+  const lightbox = document.getElementById('lightbox');
+  const lightboxImg = document.getElementById('lightbox-img');
+  const closeBtn = document.querySelector('.lightbox-close');
+
+  // Close lightbox when clicking the X
+  if (closeBtn) {
+    closeBtn.onclick = () => {
+      lightbox.style.display = "none";
+      lightboxImg.src = ""; // Clear source to stop GIFs
+    }
+  }
+
+  // Close lightbox when clicking outside the image
+  if (lightbox) {
+    lightbox.onclick = (e) => {
+      if (e.target !== lightboxImg && e.target !== closeBtn) {
+        lightbox.style.display = "none";
+        lightboxImg.src = ""; // Clear source to stop GIFs
+      }
+    }
+  }
+
   // Function to load images into a specific container from a specific folder
   const loadGallery = (containerId, folderName, totalImages) => {
     const container = document.getElementById(containerId);
@@ -8,15 +30,36 @@ document.addEventListener('DOMContentLoaded', () => {
       const img = document.createElement('img');
       img.alt = `${folderName} Image ${i}`;
       
-      // Try loading jpg -> png -> gif
-      img.src = `${folderName}/${i}.jpg`;
-      img.onerror = () => {
-        img.src = `${folderName}/${i}.png`;
-        img.onerror = () => {
-          img.src = `${folderName}/${i}.gif`;
+      // Load the thumbnail instead of the full image
+      img.src = `${folderName}/thumbnails/${i}.jpg`;
+      
+      // If thumbnail fails to load, it means the image doesn't exist at all
       img.onerror = () => { img.style.display = 'none'; };
+
+      // Open lightbox on click
+      img.onclick = () => {
+        lightbox.style.display = "block";
+        lightboxImg.src = ""; // Clear previous image
+        
+        // Try loading original full quality image: jpg -> png -> gif
+        const tryLoad = (extensions) => {
+            if (extensions.length === 0) return; // All failed
+            const testExt = extensions.shift();
+            
+            const tempImg = new Image();
+            tempImg.onload = () => {
+                lightboxImg.src = tempImg.src; // Success! Show it.
             };
+            tempImg.onerror = () => {
+                tryLoad(extensions); // Failed, try next extension
             };
+            tempImg.src = `${folderName}/${i}.${testExt}`;
+        };
+        
+        // Start trying to find the full image
+        tryLoad(['jpg', 'png', 'gif']);
+      };
+
       container.appendChild(img);
     }
   };

style/gallery.css

@@ -25,4 +25,62 @@
     height: auto;
     border-radius: 8px;
     object-fit: cover;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+.gallery-grid img:hover {
+    opacity: 0.8;
+}
+
+/* Lightbox styles */
+.lightbox {
+    display: none; /* Hidden by default */
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(5px);
+}
+
+.lightbox-content {
+    margin: auto;
+    display: block;
+    max-width: 90%;
+    max-height: 90%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 4px;
+    box-shadow: 0 0 20px rgba(0,0,0,0.5);
+    animation: zoom 0.3s;
+}
+
+@keyframes zoom {
+    from {transform: translate(-50%, -50%) scale(0.8)} 
+    to {transform: translate(-50%, -50%) scale(1)}
+}
+
+.lightbox-close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+    cursor: pointer;
+    z-index: 1001;
+}
+
+.lightbox-close:hover,
+.lightbox-close:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
 }