Galeria miniatur - zmiana zdjęcia głównego
Treść zadania
W galerii umieszczono zdjęcie główne <img id="fotoGlowne" src="m1.jpg" alt="Główne"> oraz rząd miniatur:<div id="miniatury">
<img class="mini" id="mini1" src="m1.jpg">
<img class="mini" id="mini2" src="m2.jpg">
<img class="mini" id="mini3" src="m3.jpg">
</div>
Napisz skrypt, który pobierze wszystkie miniatury i do każdej doda zdarzenie kliknięcia przypisujące jej atrybut src (np. this.src) do właściwości src zdjęcia głównego.
Co będzie oceniane
- Pobranie kolekcji miniatur za pomocą querySelectorAll('.mini').
- Rejestracja obsługi kliknięcia na każdej miniaturze.
- Aktualizacja właściwości src zdjęcia głównego #fotoGlowne.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Kliknięcie miniatury 2 podmienia główne zdjęcie na m2.jpg — atrybut #fotoGlowne = m2.jpg
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Podmieniaj src zdjęcia #fotoGlowne na src klikniętej miniatury .mini
Wskazówki
Wskazówka 1
W zdarzeniu kliknięcia słowo kluczowe this wskazuje na klikniętą miniaturę, skąd można bezpośrednio odczytać jej źródło.
Wskazówka 2
Pobierz wszystkie elementy o klasie mini, przejdź po nich pętlą i w funkcji obsługi zdarzenia przypisz właściwość źródła klikniętego obiektu do źródła zdjęcia głównego.