Galeria zdjęć interaktywnych
Zapoznaj się z ilustracją interaktywną, która prezentuje fragment przykładowej strony internetowej, stworzonej na potrzeby omawianego projektu. Następnie wykonaj ćwiczenia.
1. Zdjęcie Wybraliśmy zdjęcie, które jest dostępne na portalu z darmowymi fotografiami i grafikami., 2. Rozmiary Wybrane zdjęcia mają takie same rozmiary., 3. Kod galerii opis alternatywny, 4. Kod – wyszarzanie zdjęć oraz pokazywanie pełnej balety barw po najechaniu kursorem opis alternatywny, 5. Kod galerii, która wykorzystuje wtyczkę opis alternatywny
Na ilustracji widoczny jest fragment strony WWW. Na Górnym pasku znajduje się przepis na ciasto. W głównej części strony znajduje się galeria zdjęć ułożonych obok siebie poziomo, na jasno - beżowym tle. Zdjęcia przedstawiają makaron i warzywa umieszczone w głębokim naczyniu. Pierwsze zdjęcie jest kolorowe dwa kolejne czarno - białe. Poniżej w treści strony zapisano Lorem ipsum.
Zdjęcie makaronu i warzywa umieszczonych w głębokim naczyniu z galerii portalu Pixaby. Obok zdjęciach Widoczne są informacje na temat licencji zdjęcia oraz miniaturki zdjęć pokrewnych.
Ilustracja przedstawia trzy prostokąty ułożone poziomo obok siebie. Poniżej widoczna jest miarka. Prostokąty mają ten sam rozmiar.
Na ilustracji zaprezentowano kod galerii.
Zrzut ekranu przedstawia fragment kodu. Linia 1 . images‑gallery img { Linia 2 display: inline‑block !important; Linia 3 position: relative; Linia 4 width: 18rem; Linia 5 height: 12.5rem; Linia 6 border‑radius: 6px; Linia 7 filter: grayscale(100%); Linia 8 opacity: 0.5; Linia 9 transition: 0.4s ease; Linia 10 } Linia 11 pusta Linia 12 images‑gallery img:hover {Linia 13 cursor: pointer; Linia 14 filter: grayscale(0%); Linia 15 opacity: 1; Linia 16 transform: scale(1.9); Linia 17 z‑index: 99; Linia 18 }
Na ilustracji zaprezentowano wtyczkę, którą wykorzystuje kod galerii.
Do wykonania ćwiczenia potrzebujesz plików źródłowych przykładowej strony internetowej (znajdziesz je w sekcji „Prezentacja multimedialna”).
Pobierz załącznik. Zawiera on trzy pliki graficzne.
Zastąp nimi trzy identyczne zdjęcia dodane do galerii przykładowej strony, które w dotychczasowym projekcie wyglądają następująco:
Dodaj do zdjęć odpowiednich autorów i licencje:
plik
ciasto– autor: RitaE, licencja: CC0,plik
warzywa– autor: LubosHouska, licencja: CC0,plik
zupa– autor: Pexels, licencja: CC0.
Galeria powinna wyglądać tak:
Po kliknięciu środkowego obrazka, powinien pojawić się widok:
