Jak zrobić lightbox w HTML?

Aby stworzyć lightbox w HTML, potrzebujesz połączyć trzy technologie: HTML, CSS oraz JavaScript. Lightbox to nowoczesne rozwiązanie do prezentowania zdjęć, galerii czy dowolnej treści w oknie modalnym, które wyświetla się na tle przyciemnionej strony. Dzięki temu użytkownik skupia się na kluczowej treści.

Poniżej znajdziesz szczegółowy poradnik wraz z przykładami kodu i praktycznymi zastosowaniami, gotowy do publikacji w serwisie internetowym.

Czym jest lightbox?

Lightbox to wyskakujące okno (modal), prezentujące wybraną treść – najczęściej zdjęcie lub galerię. Overlay (przyciemnienie tła) odcina interakcję ze stroną pod spodem, skupiając uwagę na treści lightboxa. Mechanizm obsługiwany jest skryptem, który otwiera i zamyka lightbox, a stylizacja zapewnia nowoczesny wygląd i responsywność.

Struktura html

Na początek przygotujmy galerię miniaturek oraz strukturę samego lightboxa.

<!-- Galeria miniaturek -->
<div class="gallery">
  <img src="thumb1.jpg" alt="Zdjęcie 1" class="gallery-img" data-full="full1.jpg">
  <img src="thumb2.jpg" alt="Zdjęcie 2" class="gallery-img" data-full="full2.jpg">
  <img src="thumb3.jpg" alt="Zdjęcie 3" class="gallery-img" data-full="full3.jpg">
</div>
<!-- Lightbox (domyślnie ukryty) -->
<div id="lightbox" class="lightbox">
  <div class="lightbox-content">
    <span class="lightbox-close">&times;</span>
    <img class="lightbox-img" src="" alt="">
    <div class="lightbox-caption"></div>
  </div>
</div>

• data-full – przechowuje ścieżkę do dużego zdjęcia;
• .lightbox – overlay z modalem;
• .lightbox-close – przycisk zamykania.

Stylowanie css

Nadaj styl lightboxowi i spraw, by działał także na urządzeniach mobilnych.

/* Overlay - całe okno lightbox */
.lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}
/* Widoczny lightbox */
.lightbox.active {
  display: flex;
}
/* Kontener treści */
.lightbox-content {
  position: relative;
  background: #111;
  padding: 30px 20px 20px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 32px rgba(0,0,0,0.4);
  text-align: center;
  max-width: 95vw;
  max-height: 90vh;
}
/* Duże zdjęcie */
.lightbox-img {
  max-width: 80vw;
  max-height: 65vh;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
/* Przycisk zamknięcia */
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 2em;
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
}
/* Podpis pod zdjęciem */
.lightbox-caption {
  color: #eee;
  margin-top: 14px;
  font-size: 1rem;
}

Logika – javascript

Ten kod odpowiada za otwieranie i zamykanie lightboxa oraz ładowanie odpowiednich obrazów.

// Pobierz elementy DOM
const galleryImgs = document.querySelectorAll('.gallery-img');
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.querySelector('.lightbox-img');
const lightboxCaption = document.querySelector('.lightbox-caption');
const lightboxClose = document.querySelector('.lightbox-close');

// Dodaj nasłuch na miniaturki
galleryImgs.forEach(img => {
  img.addEventListener('click', function() {
    lightbox.classList.add('active');
    lightboxImg.src = this.dataset.full;
    lightboxCaption.textContent = this.alt;
  });
});

// Zamknij lightbox po kliknięciu w przycisk "X"
lightboxClose.addEventListener('click', function() {
  lightbox.classList.remove('active');
  lightboxImg.src = '';
});

// Zamknij lightbox po kliknięciu poza treść
lightbox.addEventListener('click', function(e) {
  if(e.target === lightbox) {
    lightbox.classList.remove('active');
    lightboxImg.src = '';
  }
});

// Zamknij lightbox przy naciśnięciu Escape
document.addEventListener('keydown', function(e) {
  if(e.key === "Escape" && lightbox.classList.contains('active')) {
    lightbox.classList.remove('active');
    lightboxImg.src = '';
  }
});

Zastosowania i rozszerzenia

Lightbox sprawdzi się w takich przypadkach jak –

• pokaz slajdów/galeria obrazów,
• podgląd detali produktu w sklepie internetowym,
• wyświetlanie map, filmów wideo lub formularzy.

Rozbudowy –

• Nawigacja – dodaj przyciski „następny” / „poprzedni”, by przeglądać zdjęcia bez zamykania lightboxa;
• Lazy loading – ładuj obraz dopiero po kliknięciu miniaturki, by przyspieszyć ładowanie strony;
• Responsywność – dzięki CSS lightbox automatycznie dopasowuje się do szerokości ekranu.

Przykładowe rozszerzenie nawigacji strzałkami klawiatury wymaga śledzenia indeksu aktualnie wyświetlanego zdjęcia i obsługi zdarzeń ArrowLeft/ArrowRight.

Podsumowanie

Stworzony powyżej lightbox jest lekki, responsywny i uniwersalny – można wyświetlać w nim dowolną zawartość HTML, nie tylko zdjęcia, ale także filmy, mapy czy nawet osadzone formularze. Całość opiera się na prostych mechanizmach, które są łatwe do dalszej rozbudowy i dostosowania do własnych wymagań.