Powodzenia!
Galeria zdjęć to projekt wizualnie efektowny. Lightbox z obsługą klawiszy (Escape, strzałki) to wzorzec UX, który musisz znać. Pamiętaj o e.stopPropagation() w lightboxie — bez tego kliknięcie na zdjęcie zamknie overlay!
Galeria zdjęć — siatka miniatur, kliknięcie otwiera powiększony podgląd (lightbox), filtrowanie po tagach. Zdjęcia z Unsplash API lub lokalne.
// Unsplash API (bezpłatne, 50 req/godz):// https://api.unsplash.com/photos?per_page=30&client_id=YOUR_KEY// https://api.unsplash.com/search/photos?query=mountains&client_id=YOUR_KEY
function Lightbox({ photo, onClose, onPrev, onNext }) { useEffect(() => { function handleKey(e) { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowLeft') onPrev(); if (e.key === 'ArrowRight') onNext(); } document.addEventListener('keydown', handleKey); return () => document.removeEventListener('keydown', handleKey); }, [onClose, onPrev, onNext]);
return ( <div className="lightbox-overlay" onClick={onClose}> <div className="lightbox-content" onClick={(e) => e.stopPropagation()}> <img src={photo.url} alt={photo.alt} /> <button onClick={onPrev}>‹</button> <button onClick={onNext}>›</button> <button onClick={onClose}>✕</button> </div> </div> );}useGalleryPowodzenia!
Galeria zdjęć to projekt wizualnie efektowny. Lightbox z obsługą klawiszy (Escape, strzałki) to wzorzec UX, który musisz znać. Pamiętaj o e.stopPropagation() w lightboxie — bez tego kliknięcie na zdjęcie zamknie overlay!