Nowoczesny ogród
z funkcjonalnym układem nawierzchni

<!-- ============================================================ Idealny Plan — nawigacja zdjęć w galerii realizacji Wklej całość do widgetu HTML na dole strony realizacji, albo do Elementor → Custom Code (Location: End of ). Bez zależności — nie wymaga żadnej wtyczki ani lightboxa Elementora. ============================================================ --> .ip-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center; background:rgba(14,13,12,.97);opacity:0;transition:opacity .25s ease; -webkit-tap-highlight-color:transparent} .ip-lb.is-open{display:flex} .ip-lb.is-visible{opacity:1} .ip-lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px; max-width:92vw;max-height:88vh} .ip-lb__img{display:block;max-width:92vw;max-height:76vh;object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.55);transition:opacity .18s ease} .ip-lb__img.is-loading{opacity:.2} .ip-lb__cap{margin:0;color:#e9e4dd;font-size:13px;line-height:1.55;letter-spacing:.01em; text-align:center;max-width:68ch;padding:0 8px} .ip-lb__count{position:fixed;top:22px;left:26px;color:#c8c1b8;font-size:12px; letter-spacing:.14em;font-variant-numeric:tabular-nums} /* Kontener sam przyjmuje focus po otwarciu — nie może rysować obwódki. */ .ip-lb:focus,.ip-lb:focus-visible{outline:none} /* dark pill, not light — the arrows sit over the photo on small screens and would vanish against a bright image. Selektory są dwuczłonowe (.ip-lb .ip-lb__close), żeby przebić reguły motywu i Elementora dla `button` — inaczej motyw dokłada tym przyciskom własną ramkę, cień albo obwódkę focusu i wokół „X” pojawia się jasny okrąg. */ .ip-lb .ip-lb__nav,.ip-lb .ip-lb__close{position:fixed;cursor:pointer;color:#fff; -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); display:grid;place-items:center;line-height:1;font:inherit; transition:background .2s ease,opacity .2s ease; /* !important, bo część motywów deklaruje ramkę i cień przycisków z !important */ -webkit-appearance:none!important;appearance:none!important; background:rgba(0,0,0,.42)!important;background-image:none!important; margin:0!important;padding:0!important;min-width:0!important;min-height:0!important; border:0!important;border-radius:50%!important; box-shadow:none!important;text-shadow:none!important;outline:none!important} .ip-lb .ip-lb__nav:hover,.ip-lb .ip-lb__close:hover{background:rgba(0,0,0,.68)!important} .ip-lb .ip-lb__nav:focus,.ip-lb .ip-lb__close:focus{box-shadow:none!important;outline:none!important} /* Obwódka tylko przy realnej nawigacji klawiaturą — mysz jej nie wywoła. */ .ip-lb .ip-lb__nav:focus-visible,.ip-lb .ip-lb__close:focus-visible{ outline:2px solid rgba(255,255,255,.9)!important;outline-offset:2px} .ip-lb .ip-lb__nav{top:50%;transform:translateY(-50%);width:54px;height:54px} .ip-lb .ip-lb__nav--prev{left:26px} .ip-lb .ip-lb__nav--next{right:26px} .ip-lb .ip-lb__close{top:18px;right:26px;width:44px;height:44px} .ip-lb .ip-lb__nav[hidden]{display:none} @media (max-width:780px){ .ip-lb .ip-lb__nav{width:44px;height:44px} .ip-lb .ip-lb__nav--prev{left:10px} .ip-lb .ip-lb__nav--next{right:10px} .ip-lb .ip-lb__close{right:12px} .ip-lb__count{left:14px;top:26px} .ip-lb__img{max-width:96vw;max-height:70vh} } @media (prefers-reduced-motion:reduce){ .ip-lb,.ip-lb__img{transition:none} } body.ip-lb-lock{overflow:hidden} (function () { if (window.__ipLightboxLoaded) return; window.__ipLightboxLoaded = true; var EXCLUDE = 'header, footer, nav, .elementor-location-header, .elementor-location-footer'; var IMG_URL = /\.(jpe?g|png|webp|gif|avif)(\?.*)?$/i; var items = []; var index = 0; var lastFocus = null; var root, imgEl, capEl, countEl, prevBtn, nextBtn, closeBtn; /* ---- pick the biggest file WordPress offers for this image ---- */ function largestSrc(img) { var ss = img.getAttribute('srcset'); if (ss) { var best = null, bestW = -1; ss.split(',').forEach(function (part) { var m = part.trim().match(/^(\S+)\s+(\d+)w$/); if (m && +m[2] > bestW) { bestW = +m[2]; best = m[1]; } }); if (best) return best; } return img.currentSrc || img.getAttribute('src') || ''; } /* ---- find the gallery: links that wrap an image and point at an image ---- */ function collect() { items = []; Array.prototype.forEach.call(document.querySelectorAll('a[href]'), function (a) { if (a.closest(EXCLUDE)) return; // skips the header logo var img = a.querySelector('img'); if (!img) return; var href = a.getAttribute('href') || ''; if (!IMG_URL.test(href) && !/images\.unsplash\.com/.test(href)) return; var full = largestSrc(img); if (!full) return; // repair the link: point it at our own file, same tab a.setAttribute('href', full); a.removeAttribute('target'); a.removeAttribute('rel'); var i = items.length; items.push({ src: full, alt: img.getAttribute('alt') || '' }); a.addEventListener('click', function (e) { e.preventDefault(); open(i); }); }); return items.length; } function build() { root = document.createElement('div'); root.className = 'ip-lb'; root.setAttribute('role', 'dialog'); root.setAttribute('aria-modal', 'true'); root.setAttribute('aria-label', 'Galeria zdjęć'); root.setAttribute('tabindex', '-1'); // kontener przyjmuje focus zamiast przycisku „X” root.innerHTML = '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '

' + '' + '' + '

'; document.body.appendChild(root); imgEl = root.querySelector('.ip-lb__img'); capEl = root.querySelector('.ip-lb__cap'); countEl = root.querySelector('.ip-lb__count'); prevBtn = root.querySelector('.ip-lb__nav--prev'); nextBtn = root.querySelector('.ip-lb__nav--next'); closeBtn = root.querySelector('.ip-lb__close'); prevBtn.addEventListener('click', function (e) { e.stopPropagation(); go(-1); }); nextBtn.addEventListener('click', function (e) { e.stopPropagation(); go(1); }); closeBtn.addEventListener('click', function (e) { e.stopPropagation(); close(); }); // click the backdrop (not the photo) to close root.addEventListener('click', function (e) { if (e.target === root || e.target.classList.contains('ip-lb__fig')) close(); }); document.addEventListener('keydown', onKey); // swipe on touch devices var x0 = null, y0 = null; root.addEventListener('touchstart', function (e) { x0 = e.changedTouches[0].clientX; y0 = e.changedTouches[0].clientY; }, { passive: true }); root.addEventListener('touchend', function (e) { if (x0 === null) return; var dx = e.changedTouches[0].clientX - x0; var dy = e.changedTouches[0].clientY - y0; if (Math.abs(dx) > 45 && Math.abs(dx) > Math.abs(dy)) go(dx < 0 ? 1 : -1); x0 = y0 = null; }, { passive: true }); } function onKey(e) { if (!root.classList.contains('is-open')) return; if (e.key === 'Escape') { e.preventDefault(); close(); } if (e.key === 'ArrowRight') { e.preventDefault(); go(1); } if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); } if (e.key === 'Tab') { // keep focus inside the dialog var f = [prevBtn, nextBtn, closeBtn].filter(function (b) { return !b.hidden; }); var i = f.indexOf(document.activeElement); e.preventDefault(); f[(i + (e.shiftKey ? -1 : 1) + f.length) % f.length].focus(); } } function preload(i) { if (i = items.length) return; var p = new Image(); p.src = items[i].src; } function render() { var it = items[index]; imgEl.classList.add('is-loading'); imgEl.onload = function () { imgEl.classList.remove('is-loading'); }; imgEl.src = it.src; imgEl.alt = it.alt; capEl.textContent = it.alt; countEl.textContent = (index + 1) + ' / ' + items.length; var single = items.length < 2; prevBtn.hidden = single; nextBtn.hidden = single; preload(index + 1); preload(index - 1); } function go(step) { if (items.length < 2) return; index = (index + step + items.length) % items.length; // wraps around render(); } function open(i) { lastFocus = document.activeElement; index = i; render(); root.classList.add('is-open'); document.body.classList.add('ip-lb-lock'); requestAnimationFrame(function () { root.classList.add('is-visible'); }); // focus na kontenerze, nie na „X” — przycisk skupiony myszą rysowałby obwódkę root.focus({ preventScroll: true }); } function close() { root.classList.remove('is-visible'); document.body.classList.remove('ip-lb-lock'); setTimeout(function () { root.classList.remove('is-open'); imgEl.removeAttribute('src'); }, 250); if (lastFocus && lastFocus.focus) lastFocus.focus(); } function init() { if (!collect()) return; // nothing that looks like a gallery — do nothing build(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();