Esad Erbili Hazretleri Galeri /* Jannah veya diğer temalarla çakışmamak için genel resetleri kapattım, sadece galeriye özel stiller */ .masonry-container { font-family: 'Poppins', sans-serif; column-count: 4; column-gap: 20px; max-width: 1400px; margin: 0 auto; color: #333; } .masonry-item { break-inside: avoid; margin-bottom: 20px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .masonry-item:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .masonry-item img { width: 100%; display: block; transition: opacity 0.2s ease; } .masonry-item:hover img { opacity: 0.9; } .masonry-title { padding: 15px; font-size: 14px; font-weight: 500; text-align: center; color: #222; background: #fff; } /* KESİN ÇÖZÜM: Jannah'ı ezmek için Max Z-Index ve Hızlı Animasyon */ .esad-modal-overlay { font-family: 'Poppins', sans-serif; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 2147483647 !important; /* CSS'te olabilecek en yüksek değer */ opacity: 0; visibility: hidden; transition: all 0.15s ease-out; /* Hızlı açılış */ padding: 20px; box-sizing: border-box; } .esad-modal-overlay.active { opacity: 1; visibility: visible; } .esad-modal-content { background: #fff; border-radius: 16px; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; transform: scale(0.95); transition: transform 0.15s ease-out; /* Hızlı açılış */ box-shadow: 0 20px 50px rgba(0,0,0,0.5); } .esad-modal-overlay.active .esad-modal-content { transform: scale(1); } .esad-modal-close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; background: #f1f1f1; border: none; border-radius: 50%; font-size: 24px; line-height: 1; color: #333; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background 0.2s; z-index: 10; } .esad-modal-close:hover { background: #e1e1e1; } .esad-modal-img-container { width: 100%; background: #f8f9fc; display: flex; justify-content: center; border-radius: 16px 16px 0 0; } .esad-modal-img-container img { width: 100%; max-height: 65vh; object-fit: contain; border-radius: 16px 16px 0 0; } .esad-modal-text { padding: 25px 30px; } .esad-modal-text h3 { margin: 0 0 10px 0; font-size: 18px; font-weight: 600; color: #111; } .esad-modal-text p { margin: 0; font-size: 15px; line-height: 1.6; color: #444; font-weight: 400; } @media (max-width: 1100px) { .masonry-container { column-count: 3; } } @media (max-width: 768px) { .masonry-container { column-count: 2; } } @media (max-width: 480px) { .masonry-container { column-count: 1; } } × document.addEventListener("DOMContentLoaded", function() { const baseUrl = "http://www.esaderbili.com/wp-content/uploads/2026/08/"; const galleryData = [ { id: '1', text: 'Mevlana Hâlid Hazretlerinin ecille-i hulefâsından Seyyid/Şeyh Tâhâ En Nehrî Hazretlerinin Hakkari-Şemdinli-Nehri’deki Dergâh-ı Şerifleri ve Medresesi Külliyesinin en büyük binası bir zamanlar ayakta iken. 1926’da hükûmet tarafından topçu bataryalarından yapılan atışlarla yıktırılmıştır.' }, { id: '2', text: 'Mevlana Hâlid Hazretlerinin ecille-i hulefâsından Seyyid/Şeyh Tâhâ En Nehrî Hazretlerinin Hakkari-Şemdinli-Nehri’deki Dergâh-ı Şerifleri ve Medresesi Külliyesinin en büyük binası bir zamanlar ayakta iken. 1926’da hükûmet tarafından topçu bataryalarından yapılan atışlarla yıktırılmıştır.' }, { id: '3', text: 'Şeyh Es’ad Efendi (k.s.) ve Oğlu Mehmed Ali Efendi' }, { id: '4', text: 'Şeyh Es’ad Efendi (k.s.) Kelami Dergahı’nda' }, { id: '5', text: 'Kelâmi Dergâh’ında bir zikir meclisinde en soldaki genç Mahmud Sami Ramazanoğlu Hazretleri, iki yanındaki Mehmed Ali Efendi’dir.' }, { id: '6', text: 'Mehmed Ali Efendi' }, { id: '7', text: 'Şeyh Es’ad Efendi (k.s.) Postnişîn Halîfesi Mahmud Sâmi Ramazanoğlu Hazretleri' }, { id: '8', text: 'Şeyh Es’ad Efendi (k.s.) Halifesi Çarşambalı Ali Haydar Efendi' }, { id: '9', text: 'Ali Haydar Efendi Hazretlerinin cenaze merasiminden bir fotoğraf, önde imam olarak Mahmud Sami Ramazanoğlu Hazretleri görülüyor.' }, { id: '10', text: 'Şeyh Es’ad Efendi (k.s.) Halifesi Ali Yekta Efendi' }, { id: '11', text: 'Şeyh Es’ad Efendi (k.s.) Avrupa Halîfesi Carl Vett' }, { id: '12', text: 'Şeyh Es’ad Efendi (k.s.) Erenköy’deki Evi' }, { id: '13', text: 'Menemen komplosunun basında veriliş şekline ait bir örnek' }, { id: '14', text: 'Devrin en büyük âlim ve velilerinden olan Es’ad Erbili Hazretleri, basında bir suçlu gibi lanse edilmeye devam ediyor.' }, { id: '15', text: 'O dönem hükümet borazanı olmaktan öte bir fonksiyonu olmayan gazetelerde Es’ad Erbili Hazretlerinin irtihali haber veriliyor. [1 Şubat 1931]' }, { id: '16', text: 'O dönem hükümet borazanı olmaktan öte bir fonksiyonu olmayan gazetelerde Es’ad Erbili Hazretlerinin irtihali haber veriliyor. [1 Şubat 1931]' }, { id: '17', text: 'Es’ad Erbili Hazretlerinin sandukası' }, { id: '18', text: 'Safa Camii' }, { id: '19', text: 'İstiklal Mahkemelerinden kurtulan dönemin büyük âlim ve velileri Menemen Hadisesi vesilesiyle ortadan kaldırılıyordu. Dönemin paçavralarından bir kesit…' }, { id: '20-3', text: 'Şeyh Es’ad Efendi (k.s.) Erenköy’deki Evi (Günümüz) - Devamı' }, { id: '21', text: 'Şeyh Es’ad Efendi (k.s.)' }, { id: '22', text: 'Şeyh Es’ad Efendi (k.s.)' }, { id: '23', text: 'Şeyh Es’ad Efendi (k.s.) ve Oğlu Mehmed Ali Efendi' }, { id: '24', text: 'Ali Haydar Efendi Hazretlerinin cenaze merasiminden fotoğraflar, önde imam olarak Mahmud Sami Ramazanoğlu Hazretleri görülüyor.' }, { id: '25', text: 'Ali Haydar Efendi Hazretlerinin cenaze merasiminden fotoğraflar, önde imam olarak Mahmud Sami Ramazanoğlu Hazretleri görülüyor.' }, { id: '26', text: 'Ali Haydar Efendi Hazretlerinin cenaze merasiminden fotoğraflar, önde imam olarak Mahmud Sami Ramazanoğlu Hazretleri görülüyor.' }, { id: '27', text: 'Şeyh Es’ad Efendi (k.s.) Postnişîn Halîfesi Mahmud Sâmi Ramazanoğlu Hazretleri' } ]; const masonryContainer = document.getElementById('masonryContainer'); const modalOverlay = document.getElementById('esadModalOverlay'); const modalImage = document.getElementById('esadModalImage'); const modalTitle = document.getElementById('esadModalTitle'); const modalDescription = document.getElementById('esadModalDescription'); const modalClose = document.getElementById('esadModalClose'); // Jannah'ın div hiyerarşisinden kurtarmak için modal'ı body'nin en altına taşıyoruz. document.body.appendChild(modalOverlay); galleryData.forEach(item => { const itemEl = document.createElement('div'); itemEl.className = 'masonry-item'; const photoNum = item.id.replace('-3', ''); const imgUrl = `${baseUrl}${item.id}.webp`; itemEl.innerHTML = ` ${photoNum}. Fotoğraf `; itemEl.addEventListener('click', () => { modalImage.src = imgUrl; modalTitle.textContent = `${photoNum}. Fotoğraf`; modalDescription.textContent = item.text; modalOverlay.classList.add('active'); }); masonryContainer.appendChild(itemEl); }); const closeModal = () => modalOverlay.classList.remove('active'); modalClose.addEventListener('click', closeModal); modalOverlay.addEventListener('click', closeModal); document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); }); });
