Prosta galeria zdjęć w HTML to doskonały sposób na prezentację fotografii, ilustracji lub grafik na stronie internetowej. Galeria może być bardzo minimalistyczna lub rozszerzona o dodatkowe funkcjonalności – wszystko zależy od Twoich potrzeb. Poniżej znajdziesz szczegółowy, praktyczny poradnik wraz z fragmentami kodu, poradami i sugestiami stylizacji.
Dlaczego warto tworzyć galerie zdjęć samodzielnie?
- Pełna kontrola nad wyglądem galerii i jej responsywnością,
- możliwość łatwego dostosowania galerii do specyficznych potrzeb projektu,
- podstawowa galeria wymaga jedynie HTML oraz CSS.
Podstawowa struktura galerii w HTML
Najprostszą galerię stworzysz, umieszczając obrazki w elemencie listy lub diva. Oto przykładowy kod wykorzystujący listę uporządkowaną:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Prosta galeria zdjęć</title>
<style>
.galeria {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
.galeria img {
width: 180px;
height: 120px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: transform 0.2s;
cursor: pointer;
}
.galeria img:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="galeria">
<img src="zdjecie1.jpg" alt="Opis zdjęcia 1">
<img src="zdjecie2.jpg" alt="Opis zdjęcia 2">
<img src="zdjecie3.jpg" alt="Opis zdjęcia 3">
<img src="zdjecie4.jpg" alt="Opis zdjęcia 4">
</div>
</body>
</html>
Wyjaśnienie –
- div.galeria – używa Flexboxa do rozmieszczenia obrazów w wierszach;
- każdy obrazek ma stylizację poprawiającą prezentację: zaokrąglone rogi, cień, efekt powiększenia na hover;
- opis alternatywny (alt) przy każdym zdjęciu zwiększa dostępność galerii.
Tworzenie galerii z miniaturami i linkowaniem do większych zdjęć
Często miniatury zdjęć linkują do ich większych wersji. Możesz to zrobić następująco:
<div class="galeria">
<a href="duze/zdjecie1.jpg" target="_blank">
<img src="miniatury/zdjecie1.jpg" alt="Opis zdjęcia 1">
</a>
<a href="duze/zdjecie2.jpg" target="_blank">
<img src="miniatury/zdjecie2.jpg" alt="Opis zdjęcia 2">
</a>
<!-- Kolejne elementy... -->
</div>
- każda miniatura jest opakowana znacznikiem <a>, który linkuje do dużego zdjęcia (może się ono otwierać w nowej karcie dzięki
target="_blank").
Prowadzenie bardzo prostej galerii z nawigacją w JavaScript
Jeśli chcesz, aby na stronie wyświetlane było zawsze jedno zdjęcie i użytkownik mógł przechodzić do kolejnego/przedniego, możesz użyć JavaScript:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prosta galeria - nawigacja</title>
<style>
#gallery {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
img {
width: 100%;
height: auto;
}
button {
margin: 10px;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="gallery">
<img id="galleryImage" src="img1.jpg" alt="Galeria">
<div>
<button id="prevBtn">Poprzedni</button>
<button id="nextBtn">Następny</button>
</div>
</div>
<script>
const images = ["img1.jpg", "img2.jpg", "img3.jpg"];
let current = 0;
const galleryImage = document.getElementById("galleryImage");
document.getElementById("nextBtn").onclick = function() {
current = (current + 1) % images.length;
galleryImage.src = images[current];
};
document.getElementById("prevBtn").onclick = function() {
current = (current - 1 + images.length) % images.length;
galleryImage.src = images[current];
};
</script>
</body>
</html>
Dodatkowe możliwości i stylizacje
- Responsywność – dzięki Flexboxowi i procentowym szerokościom galeria dobrze wygląda zarówno na komputerach, jak i na urządzeniach mobilnych;
- Efekty hover – powiększenie miniatury, cień, animacja pojawiania się — wszystko do osiągnięcia za pomocą CSS;
- Lightbox – jeśli chcesz, by kliknięcie w miniaturę otwierało duże zdjęcie na tle przyciemnionej strony, rozważ dodanie gotowego skryptu typu Lightbox. To lekka biblioteka oparta na JavaScript.
Przykłady zastosowań galerii zdjęć
- Portfolia fotograficzne i graficzne
- Galeria produktów w sklepie internetowym
- Prezentacja oferty (np. nieruchomości, realizacji projektów)
- Dokumentacja wydarzeń, relacje z imprez, galerie szkolne
Najczęstsze błędy i dobre praktyki
- pamiętaj o dostarczaniu alternatywnego opisu (alt) dla obrazów, co zapewnia dostępność dla osób z niepełnosprawnościami,
- optymalizuj rozmiary plików graficznych (miniatury powinny być jak najmniejsze),
- nie osadzaj zbyt wielu dużych zdjęć bez miniatur – spowolni to ładowanie strony.
Podsumowanie
Stworzenie prostej galerii zdjęć w HTML to zadanie, które nie wymaga zaawansowanej wiedzy technicznej. Najważniejsze jest logiczne rozmieszczenie zdjęć w kodzie, estetyczna stylizacja z użyciem CSS oraz zadbanie o responsywność i wygodę użytkownika. W miarę rozwoju projektu możesz stopniowo rozbudowywać funkcjonalność o elementy interaktywne i dodatkowe efekty.
