← Wszystkie wpisy

Przewodniki

Reguły powiększania obrazów po najechaniu i szybkiego pobierania

17 maja 2026 · autor JustZix Team

Obrazy to druga połowa przejęcia kontroli nad mediami. Ten przewodnik zbiera trzy reguły JustZix do pracy z obrazami: powiększanie po najechaniu, szybkie ładowanie, by nic nie zostało puste, oraz szybki przycisk pobierania, który respektuje reguły tego samego pochodzenia.

Najedź, aby powiększyć, samym CSS

Najprostsze ulepszenie nie potrzebuje JavaScriptu w ogóle. Transformacja CSS skaluje obraz, gdy na niego najedziesz, co wystarcza, by odczytać drobne szczegóły bez otwierania lightboxu.

img {
  transition: transform .18s ease;
}

img:hover {
  transform: scale(1.6);
  position: relative;
  z-index: 2147483647;
}

Skalowanie przez transform utrzymuje układ stabilny, bo obraz nadal zajmuje swój oryginalny box. Wysoki z-index przy najechaniu oznacza, że powiększony obraz pływa nad sąsiednią treścią zamiast być przycinanym.

Precyzyjna lupa z JavaScriptem

Dla szczegółowych obrazów lupa podążająca za kursorem bije płaskie skalowanie. Ta reguła śledzi wskaźnik i przesuwa punkt początkowy transformacji obrazu na miejsce pod kursorem.

(function () {
  document.addEventListener('pointermove', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG') { return; }
    var r = img.getBoundingClientRect();
    var x = ((e.clientX - r.left) / r.width) * 100;
    var y = ((e.clientY - r.top) / r.height) * 100;
    img.style.transformOrigin = x + '% ' + y + '%';
  }, true);
  document.addEventListener('pointerenter', function (e) {
    if (e.target && e.target.tagName === 'IMG') {
      e.target.style.transform = 'scale(2.4)';
      e.target.style.transition = 'transform .12s';
    }
  }, true);
  document.addEventListener('pointerleave', function (e) {
    if (e.target && e.target.tagName === 'IMG') {
      e.target.style.transform = '';
    }
  }, true);
})();

Lupa powiększa w stronę, gdziekolwiek jest kursor, więc panoramowanie po dużym obrazie wydaje się naturalne. Resetowanie transform przy pointerleave przywraca obraz do normalnego rozmiaru.

Wymuś załadowanie każdego obrazu

Leniwe ładowanie jest dobre dla pasma, ale uciążliwe, gdy chcesz przeczytać lub zapisać całą galerię, a połowa z niej jest nadal pusta. Ta reguła przełącza leniwe obrazy na szybkie i popycha wolne do ładowania.

document.querySelectorAll('img[loading="lazy"]').forEach(function (img) {
  img.loading = 'eager';
  if (img.dataset.src && !img.src) {
    img.src = img.dataset.src;
  }
  if (img.dataset.srcset && !img.srcset) {
    img.srcset = img.dataset.srcset;
  }
});

Wiele stron przechowuje prawdziwy URL w atrybucie data-src i kopiuje go do src dopiero, gdy obraz przewinie się do widoku. Skopiowanie go samodzielnie wymusza ładowanie natychmiast. Ten sam pomysł działa dla srcset.

Przycisk pobierania na jedno kliknięcie

Ta reguła dodaje niewielki przycisk pobierania do rogu każdego obrazu, gdy na niego najedziesz. Używa standardowego atrybutu download na kotwicy, który prosi przeglądarkę o zapisanie pliku.

(function () {
  document.addEventListener('pointerenter', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG' || img._dl) { return; }
    img._dl = true;
    var a = document.createElement('a');
    a.textContent = 'Zapisz';
    a.href = img.currentSrc || img.src;
    a.download = '';
    a.style.cssText = 'position:absolute;z-index:2147483647;'
      + 'background:#111;color:#fff;font:600 11px sans-serif;'
      + 'padding:3px 7px;border-radius:5px;text-decoration:none';
    var r = img.getBoundingClientRect();
    a.style.left = (r.left + window.scrollX + 4) + 'px';
    a.style.top = (r.top + window.scrollY + 4) + 'px';
    document.body.appendChild(a);
    img.addEventListener('pointerleave', function () {
      a.remove();
      img._dl = false;
    }, { once: true });
  }, true);
})();

Atrybut download działa czysto dla obrazów tego samego pochodzenia. Dla obrazów z innego pochodzenia przeglądarka może otworzyć plik w nowej karcie zamiast go zapisać, co jest oczekiwanym zachowaniem i nie czymś, co reguła powinna próbować pokonać. Użycie currentSrc wybiera rozdzielczość, którą przeglądarka faktycznie wybrała z responsywnego srcset.

Składanie tego razem

• Uruchamiaj CSS powiększania po najechaniu dla całej strony; jest tani i nieszkodliwy.
• Zarezerwuj lupę JavaScript dla stron bogatych w obrazy, jak galerie czy dokumentacja.
• Połącz regułę szybkiego ładowania z przyciskiem pobierania, by obraz był w pełni załadowany, zanim go zapiszesz.

Wszystkie trzy są dostępne w naszych gotowych przykładach lub pobierz JustZix i zbuduj własne. Dla strony wideo kontroli mediów zacznij od wymuś natywne kontrolki na każdym wideo.