معرض الصور

صور من فعاليات وأنشطة مجلس طلاب خطوة

let currentAlbum = ''; let allGalleryItems = []; // Load albums async function loadAlbums() { try { const albums = await KhotwaAPI.getGalleryAlbums(); const filtersContainer = document.getElementById('album-filters'); albums.forEach(album => { const chip = document.createElement('button'); chip.className = 'filter-chip'; chip.textContent = album; chip.dataset.album = album; chip.onclick = () => filterByAlbum(album); filtersContainer.appendChild(chip); }); } catch (error) { console.error('Error loading albums:', error); } } // Load gallery async function loadGallery(album = '') { try { const container = document.getElementById('gallery-container'); container.innerHTML = '
جاري تحميل الصور...
'; const items = await KhotwaAPI.getGallery(album); allGalleryItems = items; if (items.length === 0) { container.innerHTML = '
لا توجد صور في هذا الألبوم
'; return; } const grid = document.createElement('div'); grid.className = 'gallery-grid'; items.forEach(item => { const div = document.createElement('div'); div.className = 'gallery-item'; div.onclick = () => openLightbox(item); const img = document.createElement('img'); img.src = item.imageUrl; img.alt = item.titleAr; img.loading = 'lazy'; const caption = document.createElement('div'); caption.className = 'gallery-caption'; const title = document.createElement('h3'); title.textContent = item.titleAr; caption.appendChild(title); if (item.descriptionAr) { const desc = document.createElement('p'); desc.textContent = item.descriptionAr; caption.appendChild(desc); } if (item.album) { const badge = document.createElement('span'); badge.className = 'gallery-album-badge'; badge.textContent = item.album; caption.appendChild(badge); } div.appendChild(img); div.appendChild(caption); grid.appendChild(div); }); container.innerHTML = ''; container.appendChild(grid); } catch (error) { console.error('Error loading gallery:', error); document.getElementById('gallery-container').innerHTML = '
حدث خطأ في تحميل الصور
'; } } // Filter by album function filterByAlbum(album) { currentAlbum = album; // Update active chip document.querySelectorAll('.filter-chip').forEach(chip => { chip.classList.toggle('active', chip.dataset.album === album); }); loadGallery(album); } // Open lightbox function openLightbox(item) { document.getElementById('lightbox-img').src = item.imageUrl; document.getElementById('lightbox-title').textContent = item.titleAr; document.getElementById('lightbox-description').textContent = item.descriptionAr || ''; document.getElementById('lightbox').classList.add('active'); document.body.style.overflow = 'hidden'; } // Close lightbox function closeLightbox() { document.getElementById('lightbox').classList.remove('active'); document.body.style.overflow = ''; } // Close on escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeLightbox(); }); // Close on background click document.getElementById('lightbox').addEventListener('click', (e) => { if (e.target.id === 'lightbox') closeLightbox(); }); // Initialize document.addEventListener('DOMContentLoaded', () => { loadAlbums(); loadGallery(); });