Aby stworzyć galerię zdjęć na stronie HTML, wystarczy połączyć prosty kod HTML z CSS, a opcjonalnie z JavaScriptem, aby dodać efektowne animacje czy powiększanie zdjęć. W tym poradniku znajdziesz krok po kroku kompletny przewodnik – od podstawowej galerii po rozbudowane zastosowania z efektami i interakcją.
Podstawowa galeria zdjęć w HTML
Najprostszą galerię wykonasz, używając elementów <img>, tworząc siatkę miniatur. Każde zdjęcie może być linkiem do swojego powiększenia.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Galeria zdjęć</title>
<style>
.galeria { display: flex; flex-wrap: wrap; gap: 16px; }
.galeria img {
width: 150px;
height: 100px;
object-fit: cover;
border-radius: 8px;
transition: transform 0.3s;
cursor: pointer;
}
.galeria img:hover {
transform: scale(1.15);
box-shadow: 0 4px 18px #8888;
}
</style>
</head>
<body>
<h1>Moja galeria zdjęć</h1>
<div class="galeria">
<a href="img/zdjecie1_duze.jpg" target="_blank">
<img src="img/zdjecie1_mini.jpg" alt="Opis zdjęcia 1">
</a>
<a href="img/zdjecie2_duze.jpg" target="_blank">
<img src="img/zdjecie2_mini.jpg" alt="Opis zdjęcia 2">
</a>
<!-- Dodaj kolejne zdjęcia -->
</div>
</body>
</html>
Kluczowe elementy –
- Zdjęcia są “opakowane” w linki
<a>, dzięki czemu po kliknięciu otwiera się większa wersja zdjęcia, - Efekt po najechaniu (hover) sprawia, że zdjęcie lekko się powiększa i pojawia się cień.
Dodanie efektów CSS
Efektowne galerie często wykorzystują animacje CSS, np. powiększanie zdjęcia po najechaniu kursorem:
transitionpłynnie zmienia powiększenie (scale) podczas “hover”,transform-originmożna ustawić, by zdjęcie powiększało się względem wybranego punktu.
Przykład zaawansowanych efektów:
.galeria img {
transition: transform 0.4s cubic-bezier(.25,.8,.25,1), box-shadow 0.2s;
/* transform-origin: 50% 50%; domyślnie środek */
}
.galeria img:hover {
transform: scale(1.20) rotate(2deg);
box-shadow: 0 8px 32px #2226;
}
Galeria w formie siatki (grid)
Możesz wykorzystać CSS Grid, aby zdjęcia układały się równo niezależnie od wymiarów ekranu:
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
Galeria interaktywna z powiększaniem zdjęć (JavaScript)
Aby po kliknięciu zdjęcia pojawiało się ono w lightboxie (na środku ekranu, większe), możesz dodać prosty skrypt JavaScript:
<!-- w body -->
<div class="lightbox" id="lightbox" style="display:none;">
<span id="closeBtn">✕</span>
<img id="bigImg" src="" alt="">
</div>
<script>
const galeria = document.querySelector('.galeria');
const lightbox = document.getElementById('lightbox');
const bigImg = document.getElementById('bigImg');
const closeBtn = document.getElementById('closeBtn');
galeria.addEventListener('click', function(e) {
if (e.target.tagName === 'IMG') {
lightbox.style.display = 'flex';
bigImg.src = e.target.parentElement.href;
e.preventDefault();
}
});
closeBtn.onclick = function() {
lightbox.style.display = 'none';
};
</script>
Styl dla lightboxa (CSS):
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.lightbox img {
max-width: 80vw;
max-height: 80vh;
border-radius: 6px;
}
#closeBtn {
position: absolute;
top: 30px;
right: 50px;
font-size: 2rem;
color: #fff;
cursor: pointer;
}
Przykłady zastosowań galerii zdjęć
- Portfolio fotografa – prezentacja wybranych zdjęć z różnych kategorii, z opisem każdego zdjęcia;
- Strona firmowa – galeria realizacji (np. projekty, produkty, wnętrza);
- Blog podróżniczy – zdjęcia z wyjazdów w formie chronologicznej lub geograficznej;
- Galeria dokumentacji – dla instytucji, szkół czy organizacji prezentujących wybrane wydarzenia czy archiwalne fotografie.
Wskazówki praktyczne
- Optymalizuj zdjęcia do rozmiaru wyświetlania (miniatury i duże wersje), aby strona ładowała się szybko;
- Używaj odpowiednich atrybutów
alt, by galeria była dostępna dla osób korzystających z czytników ekranowych; - Możesz rozbudować galerię o filtry lub kategorie za pomocą JavaScriptu lub frameworków (np. gdy masz wiele albumów).
Skompletowana struktura plików
/index.html– główny plik z galerią;/img/– folder ze zdjęciami (miniatury i duże wersje);/style.css– style, jeśli nie umieszczasz ich w<head>.
Tworząc własną galerię zdjęć w HTML i CSS, zyskujesz pełną kontrolę nad wyglądem oraz funkcjonalnością. Używając JavaScriptu możesz dodać interaktywność – lightbox, filtry, dynamiczne ładowanie zdjęć i inne. Taki poradnik daje solidną bazę zarówno początkującym, jak i średnio zaawansowanym twórcom stron internetowych.
