// Mobile NavBar document.addEventListener('DOMContentLoaded', () => { // Get all "navbar-burger" elements const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); // Add a click event on each of them $navbarBurgers.forEach( el => { el.addEventListener('click', () => { // Get the target from the "data-target" attribute const target = el.dataset.target; const $target = document.getElementById(target); // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" el.classList.toggle('is-active'); $target.classList.toggle('is-active'); }); }); }); // Footer copyright date const copyDate = ( () => { let date = new Date(); document.getElementById("year").innerHTML = " " + date.getFullYear() + " "; } ); copyDate(); document.addEventListener("load", function () { // Your code goes here document.querySelectorAll("formFooter").style.display = "none"; }); document.addEventListener("DOMContentLoaded", function () { // Close lightbox when clicking outside the image document.querySelectorAll(".lightbox").forEach(function (lightbox) { lightbox.addEventListener("click", function (event) { if (event.target === lightbox) { window.location.hash = ""; // Close lightbox } }); }); // Close lightbox when pressing Escape key document.addEventListener("keydown", function (event) { if (event.key === "Escape") { window.location.hash = ""; // Close lightbox } }); }); document.addEventListener("DOMContentLoaded", function () { let images = Array.from(document.querySelectorAll(".gallery-item a")); let lightboxImages = images.map(img => img.getAttribute("href")); let currentIndex = 0; function openLightbox(index) { currentIndex = index; let lightbox = document.getElementById("lightbox"); if (!lightbox) { lightbox = document.createElement("div"); lightbox.id = "lightbox"; lightbox.className = "lightbox"; lightbox.innerHTML = ` × `; document.body.appendChild(lightbox); } let lightboxImg = document.getElementById("lightbox-img"); let lightboxCaption = document.getElementById("lightbox-caption"); let caption = images[currentIndex].parentElement.querySelector(".caption").textContent; lightboxImg.src = images[currentIndex].querySelector("img").src; lightboxCaption.textContent = caption; lightbox.style.display = "flex"; // document.getElementById("prev").onclick = () => navigateLightbox(-1); // document.getElementById("next").onclick = () => navigateLightbox(1); } function navigateLightbox(direction) { currentIndex += direction; if (currentIndex < 0) currentIndex = images.length - 1; if (currentIndex >= images.length) currentIndex = 0; let lightboxImg = document.getElementById("lightbox-img"); let lightboxCaption = document.getElementById("lightbox-caption"); lightboxImg.src = images[currentIndex].querySelector("img").src; lightboxCaption.textContent = images[currentIndex].parentElement.querySelector(".caption").textContent; } // Open lightbox when clicking a thumbnail images.forEach((img, index) => { img.addEventListener("click", (event) => { event.preventDefault(); openLightbox(index); }); }); // Close lightbox when clicking outside the image document.addEventListener("click", (event) => { if (event.target.classList.contains("lightbox")) { document.getElementById("lightbox").style.display = "none"; } }); // Close lightbox with Escape key, navigate with Left/Right arrows document.addEventListener("keydown", (event) => { if (event.key === "Escape") { document.getElementById("lightbox").style.display = "none"; } else if (event.key === "ArrowRight") { navigateLightbox(1); } else if (event.key === "ArrowLeft") { navigateLightbox(-1); } }); document.querySelector(".lightbox .close").addEventListener("click", function(event) { event.preventDefault(); document.querySelector(".lightbox").style.display = "none"; }); // Swipe gestures for mobile let touchStartX = 0; let touchEndX = 0; document.addEventListener("touchstart", (event) => { touchStartX = event.changedTouches[0].screenX; }); document.addEventListener("touchend", (event) => { touchEndX = event.changedTouches[0].screenX; handleSwipe(); }); function handleSwipe() { let swipeDistance = touchStartX - touchEndX; if (swipeDistance > 50) { navigateLightbox(1); // Swipe left → Next image } else if (swipeDistance < -50) { navigateLightbox(-1); // Swipe right → Previous image } } });