104 lines
3.1 KiB
JavaScript
104 lines
3.1 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();
|
|
});
|
|
|
|
var touchStartX = 0;
|
|
var touchStartY = 0;
|
|
lb.addEventListener(
|
|
"touchstart",
|
|
function (e) {
|
|
touchStartX = e.changedTouches[0].screenX;
|
|
touchStartY = e.changedTouches[0].screenY;
|
|
},
|
|
{ passive: true },
|
|
);
|
|
|
|
lb.addEventListener(
|
|
"touchend",
|
|
function (e) {
|
|
var dx = e.changedTouches[0].screenX - touchStartX;
|
|
var dy = e.changedTouches[0].screenY - touchStartY;
|
|
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
|
|
if (dx < 0) next();
|
|
else prev();
|
|
}
|
|
},
|
|
{ passive: true },
|
|
);
|
|
})();
|