Ćwiczenie 8 – Galeria zdjęć (HTML/CSS/JS)

Polecenie

Strona ma wyświetlać galerię 4 zdjęć w układzie siatki. Po kliknięciu na zdjęcie otwiera się większy podgląd w modalu.

• Utwórz plik galeria.html.
• Dodaj 4 obrazki w <div>.
• Ostyluj w CSS w układzie siatki (grid lub flex).
• Dodaj JavaScript, aby kliknięte zdjęcie otwierało się w modalu.

Kod HTML + CSS + JS

<div class="galeria">
    <img src="img1.jpg" alt="Zdjęcie 1">
    <img src="img2.jpg" alt="Zdjęcie 2">
    <img src="img3.jpg" alt="Zdjęcie 3">
    <img src="img4.jpg" alt="Zdjęcie 4">
</div>

<div class="modal" id="modal">
    <span id="zamknij">&times;</span>
    <img id="modalImg" src="" alt="Podgląd">
</div>

<script>
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modalImg');
const zamknij = document.getElementById('zamknij');
const obrazy = document.querySelectorAll('.galeria img');

obrazy.forEach(img => {
    img.addEventListener('click', () => {
        modal.style.display = 'flex';
        modalImg.src = img.src;
    });
});

zamknij.addEventListener('click', () => {
    modal.style.display = 'none';
});
</script>
            

Efekt końcowy

Powinna wyświetlić się siatka 4 zdjęć. Po kliknięciu w dowolne zdjęcie otworzy się modal z większym podglądem i przyciskiem zamykania.