Aby stworzyć galerię zdjęć na stronie HTML, można wykorzystać czysty kod HTML i CSS lub dodać interaktywność za pomocą JavaScript. Poniżej znajdziesz szczegółowy poradnik z przykładami kodu i propozycjami różnych wariantów galerii – od prostych, statycznych układów, po efektowne wersje z animacjami i powiększaniem zdjęć.
Najprostsza galeria zdjęć w HTML
Każde zdjęcie wstaw jako element <img> w sekcji <div>. To najprostszy wariant bez stylowania:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Galeria zdjęć</title>
</head>
<body>
<h1>Moja Galeria</h1>
<div>
<img src="zdjecie1.jpg" alt="Opis zdjęcia 1" width="200">
<img src="zdjecie2.jpg" alt="Opis zdjęcia 2" width="200">
<img src="zdjecie3.jpg" alt="Opis zdjęcia 3" width="200">
<!-- Dodaj kolejne zdjęcia -->
</div>
</body>
</html>
Zastosowanie – taka galeria jest bardzo szybka do wdrożenia i idealna na proste strony lub portfolio.
Galeria z użyciem miniatur i powiększania (podstawowy „Lightbox” w HTML)
Możesz umożliwić powiększanie zdjęć poprzez linkowanie miniatur do większych wersji obrazków:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Galeria z powiększaniem</title>
</head>
<body>
<h1>Galeria</h1>
<div>
<a href="zdjecie1_duze.jpg" target="_blank">
<img src="zdjecie1_mini.jpg" alt="Zdjęcie 1" width="150">
</a>
<a href="zdjecie2_duze.jpg" target="_blank">
<img src="zdjecie2_mini.jpg" alt="Zdjęcie 2" width="150">
</a>
<a href="zdjecie3_duze.jpg" target="_blank">
<img src="zdjecie3_mini.jpg" alt="Zdjęcie 3" width="150">
</a>
</div>
</body>
</html>
Po kliknięciu miniatury otworzy się powiększone zdjęcie w nowej karcie.
Galeria zdjęć z efektami CSS
Możesz łatwo poprawić wygląd galerii, dodając style CSS – np. układ siatki, hover z powiększeniem, marginesy.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Galeria z efektami CSS</title>
<style>
.galeria {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.galeria img {
width: 180px;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
border-radius: 6px;
transition: transform 0.3s;
cursor: pointer;
}
.galeria img:hover {
transform: scale(1.10);
z-index: 2;
}
</style>
</head>
<body>
<h2>Moja stylowa galeria</h2>
<div class="galeria">
<img src="zdjecie1.jpg" alt="Zdjęcie 1">
<img src="zdjecie2.jpg" alt="Zdjęcie 2">
<img src="zdjecie3.jpg" alt="Zdjęcie 3">
<!-- Kolejne zdjęcia -->
</div>
</body>
</html>
Efekt – po najechaniu na zdjęcie następuje płynne powiększenie i wyraźniejsze wyróżnienie wybranego obrazu.
Responsywna galeria w siatce z CSS Grid
Aby galeria dobrze wyglądała także na telefonach, warto użyć CSS Grid –
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Galeria responsywna</title>
<style>
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.galeria img {
width: 100%;
display: block;
border-radius: 4px;
}
</style>
</head>
<body>
<h2>Galeria responsywna</h2>
<div class="galeria">
<img src="zdjecie1.jpg" alt="Zdjęcie 1">
<img src="zdjecie2.jpg" alt="Zdjęcie 2">
<img src="zdjecie3.jpg" alt="Zdjęcie 3">
<!-- Dodaj więcej zdjęć -->
</div>
</body>
</html>
Zastosowanie – idealna do galerii mobilnych i dynamicznych – liczba kolumn automatycznie dopasowuje się do szerokości ekranu.
Galeria z powiększaniem zdjęć przy użyciu JavaScript
Poniższy wariant pozwala, by po kliknięciu zdjęcie zostało powiększone na tle przyciemnionym („Lightbox”):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Galeria z Lightboxem</title>
<style>
.galeria img {
width: 160px;
margin: 6px;
cursor: pointer;
border-radius: 3px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
justify-content: center;
align-items: center;
z-index: 100;
}
.overlay img {
max-height: 80vh;
max-width: 90vw;
border-radius: 10px;
}
.overlay.active {
display: flex;
}
</style>
</head>
<body>
<h2>Galeria z Lightboxem</h2>
<div class="galeria">
<img src="zdjecie1.jpg" alt="Zdjęcie 1">
<img src="zdjecie2.jpg" alt="Zdjęcie 2">
<img src="zdjecie3.jpg" alt="Zdjęcie 3">
</div>
<div class="overlay" id="overlay">
<img src="#" alt="Powiększone zdjęcie" id="lightbox-img">
</div>
<script>
const imgs = document.querySelectorAll('.galeria img');
const overlay = document.getElementById('overlay');
const lightboxImg = document.getElementById('lightbox-img');
imgs.forEach(img => {
img.addEventListener('click', () => {
lightboxImg.src = img.src;
overlay.classList.add('active');
});
});
overlay.addEventListener('click', () => {
overlay.classList.remove('active');
lightboxImg.src = '#';
});
</script>
</body>
</html>
Zastosowanie – efekt pozwala na przyjemne przeglądanie zdjęć i sprawdza się nawet w rozbudowanych galeriach.
Podpowiedzi i dobre praktyki
- Optymalizacja obrazów – przed dodaniem do galerii zmniejsz rozmiar zdjęć oraz utwórz oddzielne wersje miniaturowe, aby przyspieszyć ładowanie strony;
- Nazewnictwo plików – stosuj spójne i opisowe nazwy obrazów oraz zadbaj o atrybuty
altpoprawiające dostępność i SEO; - Porządek w kodzie – wydziel zdjęcia do osobnego folderu, np.
/galeria/; - Dodawanie podpisów – pod każdym zdjęciem możesz umieszczać podpis za pomocą
<figcaption>wewnątrz elementu<figure>.
Zastosowania galerii zdjęć na stronach internetowych
- Portfolio fotograficzne lub graficzne;
- Galerie wydarzeń (konferencje, wesela, eventy);
- Katalogi produktów;
- Wizytówki firmowe z prezentacją usług;
- Artykuły blogowe bogate w zdjęcia.
Każdy z zaprezentowanych wariantów możesz dowolnie modyfikować i rozbudowywać, np. o kolejne style, układ kafelkowy, paginację lub integrację z systemami CMS. Prosty kod HTML i CSS pozwala stworzyć atrakcyjne galerie zdjęć, które sprawdzą się zarówno na małych, prywatnych stronach, jak i na profesjonalnych serwisach internetowych.
