document.addEventListener("DOMContentLoaded", ()=>{
const newsFullContent = document.querySelector(".news-page-full");
if(newsFullContent){
const allImages = newsFullContent.querySelectorAll("img");
if(allImages.length > 0){
allImages.forEach((image, index)=>{
image.addEventListener("click", ()=>{
openGallery(index, allImages);
});
});
}
}
});
const openGallery = (index, allImages)=>{
let current = index;
document.body.classList.add("overflow-hidden");
const galleryBg = document.createElement("div");
galleryBg.id = "gallery-content-bg";
galleryBg.addEventListener("click", (e)=>{
if(e.target.id === "gallery-content-bg") {
galleryBg.remove();
document.body.classList.remove("overflow-hidden");
}
});
const galleryClose = document.createElement("div");
galleryClose.id = "gallery-close";
galleryClose.innerHTML = ``;
galleryClose.addEventListener("click", ()=> {
galleryBg.remove();
document.body.classList.remove("overflow-hidden");
});
galleryBg.appendChild(galleryClose);
const image = document.createElement("img");
image.src = allImages[index].getAttribute("src");
galleryBg.appendChild(image);
if(allImages.length > 1){
const toNext = ()=>{
const next = current < allImages.length - 1? current + 1 : 0;
image.src = allImages[next].getAttribute("src");
current = next;
}
const toPrev = ()=>{
const prev = current > 0 ? current -1 : allImages.length - 1;
image.src = allImages[prev].getAttribute("src");
current = prev;
}
const leftButton = document.createElement("div");
leftButton.id = "gallery-left";
leftButton.className = "gallery-button";
leftButton.addEventListener("click", toPrev);
leftButton.innerHTML = ``;
galleryBg.appendChild(leftButton);
const rightButton = document.createElement("div");
rightButton.id = "gallery-right";
rightButton.className = "gallery-button";
rightButton.addEventListener("click", toNext);
rightButton.innerHTML = ``;
galleryBg.appendChild(rightButton);
let started = false;
let currentLeft;
image.addEventListener("touchstart", (e)=>{
e.preventDefault();
started = e.touches[0].clientX;
});
image.addEventListener("mousedown", (e)=>{
e.preventDefault();
started = e.clientX;
});
galleryBg.addEventListener("touchend", (e)=>{
if(started){
if(currentLeft > 0){
toPrev();
} else {
toNext();
}
image.style.marginLeft = "0px";
started = false;
}
});
galleryBg.addEventListener("mouseup", (e)=>{
if(started){
if(currentLeft > 0){
toPrev();
} else {
toNext();
}
image.style.marginLeft = "0px";
started = false;
}
});
galleryBg.addEventListener("touchmove", (e)=>{
if(started){
currentLeft = e.touches[0].clientX - started
image.style.marginLeft = currentLeft + "px";
}
});
galleryBg.addEventListener("mousemove", (e)=>{
if(started){
currentLeft = e.clientX - started
image.style.marginLeft = currentLeft + "px";
}
});
}
document.body.appendChild(galleryBg);
}