/* Temel Sayfa Ayarları */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; margin: 0; padding: 40px 20px; color: #333; } h1 { text-align: center; margin-bottom: 40px; font-size: 2.5rem; color: #2c3e50; } /* Masonry Grid Ayarları */ .masonry-gallery { column-count: 4; column-gap: 20px; max-width: 1400px; margin: 0 auto; } @media (max-width: 1200px) { .masonry-gallery { column-count: 3; } } @media (max-width: 800px) { .masonry-gallery { column-count: 2; } } @media (max-width: 500px) { .masonry-gallery { column-count: 1; } } /* Görsel Kutusu */ .masonry-item { break-inside: avoid; margin-bottom: 20px; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); cursor: pointer; background-color: #fff; } .masonry-item img { width: 100%; display: block; transition: transform 0.4s ease; } .masonry-item:hover img { transform: scale(1.08); } .masonry-item::after { content: '🔍'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); color: white; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; font-size: 2.2rem; font-weight: bold; pointer-events: none; } .masonry-item:hover::after { opacity: 1; } /* Lightbox Ayarları */ .lightbox { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.92); justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; } .lightbox-content { display: flex; flex-direction: column; align-items: center; max-width: 90%; max-height: 95vh; animation: zoomIn 0.15s ease; } .lightbox img { max-width: 100%; max-height: 75vh; border-radius: 6px; box-shadow: 0 0 30px rgba(0,0,0,0.6); object-fit: contain; } /* Resim Altı Açıklama Kutusu */ .lightbox-caption { margin-top: 15px; color: #f1f1f1; font-size: 1.05rem; line-height: 1.6; text-align: center; max-width: 800px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); padding: 12px 24px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); } @keyframes zoomIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Kapatma Butonu */ .close-btn { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 45px; font-weight: 300; cursor: pointer; transition: color 0.2s, transform 0.2s; user-select: none; z-index: 1010; } .close-btn:hover { color: #ff5e57; transform: scale(1.1); } × const masonryImages = document.querySelectorAll('.masonry-item img'); const lightbox = document.getElementById('lightbox'); const lightboxImg = document.getElementById('lightbox-img'); const lightboxCaption = document.getElementById('lightbox-caption'); const closeBtn = document.querySelector('.close-btn'); function preloadImage(url) { const img = new Image(); img.src = url; } masonryImages.forEach(img => { // Ön yükleme img.addEventListener('mouseover', function() { preloadImage(this.src); }); // Tıklayınca açma ve başlık aktarma img.addEventListener('click', function() { lightboxImg.src = this.src; const caption = this.getAttribute('data-caption') || ''; if (caption.trim() !== '') { lightboxCaption.textContent = caption; lightboxCaption.style.display = 'block'; } else { lightboxCaption.style.display = 'none'; } lightbox.style.display = 'flex'; }); }); // Kapatma Fonksiyonları closeBtn.addEventListener('click', () => lightbox.style.display = 'none'); lightbox.addEventListener('click', (e) => { if (e.target === lightbox) lightbox.style.display = 'none'; }); document.addEventListener('keydown', (e) => { if (e.key === "Escape" && lightbox.style.display === 'flex') { lightbox.style.display = 'none'; } });
