Galerie obrazów — HTML, CSS, JavaScript

1. Galeria z lightboxem

Cel: otwieranie powiększonego obrazu w „oknie” nad stroną (lightbox).

Kliknięcie miniatury otwiera powiększony obraz w ciemnym overlayu. Uczniowie przepisują kod, a potem zmieniają źródła obrazów, podpisy oraz styl lightboxa.

<div class="gallery">
    <img src="image1.jpg" alt="Obraz 1" onclick="openLightbox(this)">
    <img src="image2.jpg" alt="Obraz 2" onclick="openLightbox(this)">
    <img src="image3.jpg" alt="Obraz 3" onclick="openLightbox(this)">
</div>

<div class="lightbox" onclick="closeLightbox()">
    <img id="lightbox-img" src="" alt="Podgląd">
</div>

2. Efekty filtrów na obrazach

Cel: zastosować filtr CSS grayscale() i zdarzenie :hover.

Obrazy poniżej są domyślnie czarno‑białe, a po najechaniu odzyskują kolor. Uczniowie mogą dodać inne filtry, np. blur() lub sepia().

<div class="filters">
    <img src="image1.jpg" alt="Obraz 1">
    <img src="image2.jpg" alt="Obraz 2">
</div>

3. Karuzela obrazów

Cel: stworzyć prosty slider sterowany funkcją JS wywoływaną przez setInterval().

Karuzela co kilka sekund podmienia obraz — aktywna jest tylko jedna klasa .active. Zadanie rozszerzające: dodać przyciski „Poprzedni” i „Następny”.

<div class="carousel">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
</div>

4. Galeria 3D

Cel: użyć perspective i obrotu rotateY(), aby stworzyć efekt „pochylonej” karty.

Obrazy obracają się lekko w osi Y i powiększają się przy najechaniu, dając wrażenie przestrzenności. Można to wykorzystać jako bazę do kart z opisem prac ucznia.

<div class="gallery-3d">
    <img src="image1.jpg" alt="Obraz 1">
    <img src="image2.jpg" alt="Obraz 2">
    <img src="image3.jpg" alt="Obraz 3">
</div>