diff --git a/ahmet/thumbnails/1.jpg b/ahmet/thumbnails/1.jpg new file mode 100644 index 0000000..88d159e Binary files /dev/null and b/ahmet/thumbnails/1.jpg differ diff --git a/gallery/thumbnails/1.jpg b/gallery/thumbnails/1.jpg new file mode 100644 index 0000000..de15e78 Binary files /dev/null and b/gallery/thumbnails/1.jpg differ diff --git a/gallery/thumbnails/10.jpg b/gallery/thumbnails/10.jpg new file mode 100644 index 0000000..9ee4203 Binary files /dev/null and b/gallery/thumbnails/10.jpg differ diff --git a/gallery/thumbnails/11.jpg b/gallery/thumbnails/11.jpg new file mode 100644 index 0000000..aace3a8 Binary files /dev/null and b/gallery/thumbnails/11.jpg differ diff --git a/gallery/thumbnails/12.jpg b/gallery/thumbnails/12.jpg new file mode 100644 index 0000000..52a64a9 Binary files /dev/null and b/gallery/thumbnails/12.jpg differ diff --git a/gallery/thumbnails/13.jpg b/gallery/thumbnails/13.jpg new file mode 100644 index 0000000..3ebfbb7 Binary files /dev/null and b/gallery/thumbnails/13.jpg differ diff --git a/gallery/thumbnails/14.jpg b/gallery/thumbnails/14.jpg new file mode 100644 index 0000000..f85beaa Binary files /dev/null and b/gallery/thumbnails/14.jpg differ diff --git a/gallery/thumbnails/15.jpg b/gallery/thumbnails/15.jpg new file mode 100644 index 0000000..34aef61 Binary files /dev/null and b/gallery/thumbnails/15.jpg differ diff --git a/gallery/thumbnails/16.jpg b/gallery/thumbnails/16.jpg new file mode 100644 index 0000000..16029c4 Binary files /dev/null and b/gallery/thumbnails/16.jpg differ diff --git a/gallery/thumbnails/17.jpg b/gallery/thumbnails/17.jpg new file mode 100644 index 0000000..e3d090a Binary files /dev/null and b/gallery/thumbnails/17.jpg differ diff --git a/gallery/thumbnails/18.jpg b/gallery/thumbnails/18.jpg new file mode 100644 index 0000000..9470bd7 Binary files /dev/null and b/gallery/thumbnails/18.jpg differ diff --git a/gallery/thumbnails/19.jpg b/gallery/thumbnails/19.jpg new file mode 100644 index 0000000..b24bde7 Binary files /dev/null and b/gallery/thumbnails/19.jpg differ diff --git a/gallery/thumbnails/2.jpg b/gallery/thumbnails/2.jpg new file mode 100644 index 0000000..25469b4 Binary files /dev/null and b/gallery/thumbnails/2.jpg differ diff --git a/gallery/thumbnails/20.jpg b/gallery/thumbnails/20.jpg new file mode 100644 index 0000000..f688d78 Binary files /dev/null and b/gallery/thumbnails/20.jpg differ diff --git a/gallery/thumbnails/21.jpg b/gallery/thumbnails/21.jpg new file mode 100644 index 0000000..993f314 Binary files /dev/null and b/gallery/thumbnails/21.jpg differ diff --git a/gallery/thumbnails/22.jpg b/gallery/thumbnails/22.jpg new file mode 100644 index 0000000..90e54db Binary files /dev/null and b/gallery/thumbnails/22.jpg differ diff --git a/gallery/thumbnails/23.jpg b/gallery/thumbnails/23.jpg new file mode 100644 index 0000000..7983997 Binary files /dev/null and b/gallery/thumbnails/23.jpg differ diff --git a/gallery/thumbnails/24.jpg b/gallery/thumbnails/24.jpg new file mode 100644 index 0000000..d0a2d75 Binary files /dev/null and b/gallery/thumbnails/24.jpg differ diff --git a/gallery/thumbnails/25.jpg b/gallery/thumbnails/25.jpg new file mode 100644 index 0000000..78f1ed0 Binary files /dev/null and b/gallery/thumbnails/25.jpg differ diff --git a/gallery/thumbnails/26.jpg b/gallery/thumbnails/26.jpg new file mode 100644 index 0000000..d94b60b Binary files /dev/null and b/gallery/thumbnails/26.jpg differ diff --git a/gallery/thumbnails/27.jpg b/gallery/thumbnails/27.jpg new file mode 100644 index 0000000..a64fdc8 Binary files /dev/null and b/gallery/thumbnails/27.jpg differ diff --git a/gallery/thumbnails/28.jpg b/gallery/thumbnails/28.jpg new file mode 100644 index 0000000..b2f3b03 Binary files /dev/null and b/gallery/thumbnails/28.jpg differ diff --git a/gallery/thumbnails/29.jpg b/gallery/thumbnails/29.jpg new file mode 100644 index 0000000..2dbe672 Binary files /dev/null and b/gallery/thumbnails/29.jpg differ diff --git a/gallery/thumbnails/3.jpg b/gallery/thumbnails/3.jpg new file mode 100644 index 0000000..fe42504 Binary files /dev/null and b/gallery/thumbnails/3.jpg differ diff --git a/gallery/thumbnails/30.jpg b/gallery/thumbnails/30.jpg new file mode 100644 index 0000000..a97f620 Binary files /dev/null and b/gallery/thumbnails/30.jpg differ diff --git a/gallery/thumbnails/31.jpg b/gallery/thumbnails/31.jpg new file mode 100644 index 0000000..ad67257 Binary files /dev/null and b/gallery/thumbnails/31.jpg differ diff --git a/gallery/thumbnails/32.jpg b/gallery/thumbnails/32.jpg new file mode 100644 index 0000000..53cd1d5 Binary files /dev/null and b/gallery/thumbnails/32.jpg differ diff --git a/gallery/thumbnails/33.jpg b/gallery/thumbnails/33.jpg new file mode 100644 index 0000000..55bf62c Binary files /dev/null and b/gallery/thumbnails/33.jpg differ diff --git a/gallery/thumbnails/34.jpg b/gallery/thumbnails/34.jpg new file mode 100644 index 0000000..2091b01 Binary files /dev/null and b/gallery/thumbnails/34.jpg differ diff --git a/gallery/thumbnails/35.jpg b/gallery/thumbnails/35.jpg new file mode 100644 index 0000000..1e00f16 Binary files /dev/null and b/gallery/thumbnails/35.jpg differ diff --git a/gallery/thumbnails/36.jpg b/gallery/thumbnails/36.jpg new file mode 100644 index 0000000..a9fa02f Binary files /dev/null and b/gallery/thumbnails/36.jpg differ diff --git a/gallery/thumbnails/37.jpg b/gallery/thumbnails/37.jpg new file mode 100644 index 0000000..45f7dc5 Binary files /dev/null and b/gallery/thumbnails/37.jpg differ diff --git a/gallery/thumbnails/38.jpg b/gallery/thumbnails/38.jpg new file mode 100644 index 0000000..d3febf5 Binary files /dev/null and b/gallery/thumbnails/38.jpg differ diff --git a/gallery/thumbnails/4.jpg b/gallery/thumbnails/4.jpg new file mode 100644 index 0000000..e9bab8d Binary files /dev/null and b/gallery/thumbnails/4.jpg differ diff --git a/gallery/thumbnails/5.jpg b/gallery/thumbnails/5.jpg new file mode 100644 index 0000000..5b09726 Binary files /dev/null and b/gallery/thumbnails/5.jpg differ diff --git a/gallery/thumbnails/6.jpg b/gallery/thumbnails/6.jpg new file mode 100644 index 0000000..685b573 Binary files /dev/null and b/gallery/thumbnails/6.jpg differ diff --git a/gallery/thumbnails/7.jpg b/gallery/thumbnails/7.jpg new file mode 100644 index 0000000..a5ffc9e Binary files /dev/null and b/gallery/thumbnails/7.jpg differ diff --git a/gallery/thumbnails/8.jpg b/gallery/thumbnails/8.jpg new file mode 100644 index 0000000..0e73e4d Binary files /dev/null and b/gallery/thumbnails/8.jpg differ diff --git a/gallery/thumbnails/9.jpg b/gallery/thumbnails/9.jpg new file mode 100644 index 0000000..5461b9e Binary files /dev/null and b/gallery/thumbnails/9.jpg differ diff --git a/generate_thumbnails.py b/generate_thumbnails.py new file mode 100644 index 0000000..ad2a9c2 --- /dev/null +++ b/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") diff --git a/index.html b/index.html index 637b7d1..c613f38 100644 --- a/index.html +++ b/index.html @@ -96,5 +96,11 @@ + + + diff --git a/js/gallery.js b/js/gallery.js index 8f71ada..08e407c 100644 --- a/js/gallery.js +++ b/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`; - img.onerror = () => { img.style.display = 'none'; }; + // 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); } }; diff --git a/style/gallery.css b/style/gallery.css index d2423f0..b75e2c2 100644 --- a/style/gallery.css +++ b/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; } \ No newline at end of file