63 lines
2.4 KiB
JavaScript
63 lines
2.4 KiB
JavaScript
(function () {
|
|
var grid = document.getElementById('portfolio-grid');
|
|
if (!grid) return;
|
|
|
|
var items = Array.from(grid.children);
|
|
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.removeAttribute('src');
|
|
lbImg.alt = '';
|
|
lb.classList.add('open');
|
|
lbImg.src = img.src;
|
|
lbImg.alt = img.alt;
|
|
}
|
|
|
|
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();
|
|
});
|
|
})();
|