← Wszystkie wpisy

Poradniki

Powiększanie obrazków po najechaniu — lightbox bez biblioteki

15 maja 2026 · autor JustZix Team

Galerie, sklepy, banki zdjęć — wszędzie miniatury. Żeby zobaczyć obrazek w pełnej krasie, musisz kliknąć, poczekać, wrócić. Ta reguła dokłada podgląd na najechanie: najeżdżasz na miniaturę, większa wersja wyskakuje przy kursorze. Lekki lightbox bez żadnej biblioteki.

Reguła

JavaScript reguły — wzorzec URL na galerię, której używasz, albo * globalnie:

const box = document.createElement('img');
box.style.cssText =
  'position:fixed;pointer-events:none;z-index:99999;max-width:40vw;' +
  'max-height:80vh;box-shadow:0 8px 32px rgba(0,0,0,.4);' +
  'border-radius:8px;display:none';
document.body.appendChild(box);
addEventListener('mouseover', (e) => {
  const img = e.target.closest('img');
  if (!img) return;
  box.src = img.currentSrc || img.src;
  box.style.display = 'block';
});
addEventListener('mousemove', (e) => {
  box.style.left = (e.clientX + 24) + 'px';
  box.style.top = (e.clientY + 24) + 'px';
});
addEventListener('mouseout', () => { box.style.display = 'none'; });

Jak to działa

Jeden element podglądu

Tworzymy dokładnie jeden <img> i używamy go w kółko, tylko podmieniając src. Żadnego sprzątania DOM-u, żadnych wycieków.

pointer-events: none

Podgląd leży nad stroną. Bez pointer-events: none sam łapałby zdarzenia myszy — kursor „wchodziłby" w podgląd, mouseout się sypał i podgląd migotał. Z tą regułą podgląd jest dla myszy przezroczysty.

currentSrc kontra src

img.currentSrc to wersja, którą przeglądarka faktycznie wybrała z srcset — zwykle ostrzejsza niż src. Sięgamy po nią najpierw, z src jako zapasem.

position: fixed plus współrzędne klienta

position: fixed ustawia podgląd względem okna, a e.clientX/clientY to pozycja kursora względem okna — pasują do siebie, więc podgląd trzyma się kursora niezależnie od scrolla.

Wariant — pełny rozmiar zamiast miniatury

W wielu galeriach miniatura ma URL w stylu .../thumb/foto.jpg, a pełny rozmiar to .../large/foto.jpg. Podmień box.src na przerobiony adres:

box.src = (img.currentSrc || img.src).replace('/thumb/', '/large/');

Wzorzec różni się stroną w stronę — zajrzyj w src miniatury i pełnego zdjęcia, znajdź różnicę.

Pułapki

• Tła CSS to nie obrazki. Zdjęcia wstawione jako background-image nie są elementami <img> — ta reguła ich nie złapie.
• Leniwe ładowanie. Miniatura z loading="lazy", której jeszcze nie doscrollowano, może nie mieć src. Po pojawieniu się w kadrze działa normalnie.
• Maleńkie ikony. Reguła łapie każdy <img>, też ikonki UI. Chcąc tylko galerię, zawęź selektor, np. e.target.closest('.gallery img').

Zobacz też

• Przykłady — snippet zoomu i inne gotowce
• Auto-pager — kolejna reguła „dorób funkcję, której strona nie ma"
• Mini-IDE w karcie — gdzie testować takie reguły

Zainstaluj JustZix — i oglądaj zdjęcia bez klikania w każde z osobna.