bronku/piekarnikgosipl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

image zoom

Browse source
This commit is contained in:
bronkuu 2026-06-02 10:13:10 +02:00
parent a891f1087a
commit 56db1b365d
5 changed files with 130 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

61
js/portfolio.js Normal file
View file

@ -0,0 +1,61 @@
(function () {
var grid = document.getElementById('portfolio-grid');
if (!grid) return;
var items = Array.from(grid.querySelectorAll(':scope > div'));
if (!items.length) return;
var lb = document.createElement('div');
lb.id = 'lightbox';
lb.innerHTML =
'<button id="lb-close" aria-label="Zamknij"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>' +
'<button id="lb-prev" aria-label="Poprzednie"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>' +
'<img src="" alt="">' +
'<button id="lb-next" aria-label="Następne"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>';
document.body.appendChild(lb);
var lbImg = lb.querySelector('img');
var current = -1;
function open(idx) {
current = idx;
var img = items[current].querySelector('img');
lbImg.src = img.src;
lbImg.alt = img.alt;
lb.classList.add('open');
}
function close() {
lb.classList.remove('open');
current = -1;
}
function prev() {
if (current < 0) return;
open((current - 1 + items.length) % items.length);
}
function next() {
if (current < 0) return;
open((current + 1) % items.length);
}
items.forEach(function (item, i) {
item.addEventListener('click', function () { open(i); });
});
lb.querySelector('#lb-close').addEventListener('click', close);
lb.querySelector('#lb-prev').addEventListener('click', function (e) { e.stopPropagation(); prev(); });
lb.querySelector('#lb-next').addEventListener('click', function (e) { e.stopPropagation(); next(); });
document.addEventListener('keydown', function (e) {
if (!lb.classList.contains('open')) return;
if (e.key === 'Escape') { close(); e.preventDefault(); }
if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }
if (e.key === 'ArrowRight') { next(); e.preventDefault(); }
});
lb.addEventListener('click', function (e) {
if (e.target === lb) close();
});
})();