function openBg() { const element = document.getElementById("secbgs"); if (element.classList.contains("vis")) { element.classList.remove("vis"); element.classList.add("inv"); } else { element.classList.remove("inv"); element.classList.add("vis"); } } //menu section: function showM() { const element = document.getElementById("menusectionbuttons"); if (element.classList.contains("vis")) { element.classList.remove("vis"); element.classList.add("inv"); } else { element.classList.remove("inv"); element.classList.add("vis"); } } function goToS(ids) { ids.forEach(id => { const element = document.getElementById(id); if (element) { element.classList.remove('inv'); } element.scrollIntoView({ behavior: 'smooth' }); }); } function goTo(ids) { ids.forEach(id => { const element = document.getElementById(id); element.scrollIntoView({ behavior: 'smooth' }); }); } function toggleVisibility(ids) { ids.forEach(id => { const element = document.getElementById(id); if (element) { element.classList.toggle('inv'); } element.scrollIntoView({ behavior: 'smooth' }); }); } function goT() { const top = document.querySelector(".titulo"); top.scrollIntoView({ behavior: 'smooth' }); } //menu section end. function openCDA() { const element = document.getElementById("bgCDA"); element.scrollIntoView({ behavior: 'smooth' }); } function openACEOC() { const element = document.getElementById("bgACEOC"); element.scrollIntoView({ behavior: 'smooth' }); } function openGDE() { const element = document.getElementById("bgGDE"); element.scrollIntoView({ behavior: 'smooth' }); } function openA() { const element = document.querySelector(".AnimationD"); element.scrollIntoView({ behavior: 'smooth' }); } function openI() { const element = document.querySelector(".IllustrationD"); element.scrollIntoView({ behavior: 'smooth' }); } function openABT() { const element = document.querySelector(".AboutD"); element.scrollIntoView({ behavior: 'smooth' }); } let currentIndex = 0; // To keep track of the current image index const images = document.querySelectorAll(".image-container img"); const popupImage = document.querySelector(".popup-image"); const popupImgElement = popupImage.querySelector("img"); const closeButton = popupImage.querySelector(".close"); const prevButton = popupImage.querySelector(".prev"); const nextButton = popupImage.querySelector(".next"); // Function to show the popup with the selected image function showpp(imageElement) { currentIndex = Array.from(images).indexOf(imageElement); // Get the index of the clicked image popupImage.style.display = "block"; popupImgElement.src = imageElement.getAttribute("src"); } // Close button functionality closeButton.onclick = () => { popupImage.style.display = "none"; }; // Function to show the next image nextButton.onclick = () => { currentIndex = (currentIndex + 1) % images.length; // Loop back to the first image console.log("Next Image Index:", currentIndex); // Debugging line popupImgElement.src = images[currentIndex].getAttribute("src"); }; prevButton.onclick = () => { currentIndex = (currentIndex - 1 + images.length) % images.length; // Loop back to the last image console.log("Previous Image Index:", currentIndex); // Debugging line popupImgElement.src = images[currentIndex].getAttribute("src"); }; // Add click event to each image document.querySelectorAll(".image-container img").forEach(image => { image.onclick = () => showpp(image); }); //Seção abaixo é para os Bgs da Cabeça e o Corpo: let currentIndex2 = 0; // To keep track of the current image index const images2 = document.querySelectorAll("#bgACEOC .image-container2 img"); // Select images specifically from ACEOC const popupImage2 = document.querySelector(".popup-image2"); const popupImgElement2 = popupImage2.querySelector("img"); // Correctly reference the popup image element const closeButton2 = popupImage2.querySelector(".close2"); // Correctly reference the close button const prevButton2 = popupImage2.querySelector(".prev2"); // Correctly reference the previous button const nextButton2 = popupImage2.querySelector(".next2"); // Correctly reference the next button // Function to show the popup with the selected image function showpp2(imageElement2) { currentIndex2 = Array.from(images2).indexOf(imageElement2); // Get the index of the clicked image popupImage2.style.display = "block"; popupImgElement2.src = imageElement2.getAttribute("src"); } // Close button functionality closeButton2.onclick = () => { popupImage2.style.display = "none"; }; // Function to show the next image nextButton2.onclick = () => { currentIndex2 = (currentIndex2 + 1) % images2.length; // Loop back to the first image console.log("Next Image Index:", currentIndex2); // Debugging line popupImgElement2.src = images2[currentIndex2].getAttribute("src"); }; prevButton2.onclick = () => { currentIndex2 = (currentIndex2 - 1 + images2.length) % images2.length; // Loop back to the last image console.log("Previous Image Index:", currentIndex2); // Debugging line popupImgElement2.src = images2[currentIndex2].getAttribute("src"); }; // Add click event to each image in ACEOC document.querySelectorAll("#bgACEOC .image-container2 img").forEach(image2 => { image2.onclick = () => showpp2(image2); }); //The code bellow is for the "Gogó da Ema" let currentIndex3 = 0; // To keep track of the current image index const images3 = document.querySelectorAll("#bgGDE .image-container3 img"); // Select images specifically from ACEOC const popupImage3 = document.querySelector(".popup-image3"); const popupImgElement3 = popupImage3.querySelector("img"); // Correctly reference the popup image element const closeButton3 = popupImage3.querySelector(".close3"); // Correctly reference the close button const prevButton3 = popupImage3.querySelector(".prev3"); // Correctly reference the previous button const nextButton3 = popupImage3.querySelector(".next3"); // Correctly reference the next button // Function to show the popup with the selected image function showpp3(imageElement3) { currentIndex3 = Array.from(images3).indexOf(imageElement3); // Get the index of the clicked image popupImage3.style.display = "block"; popupImgElement3.src = imageElement3.getAttribute("src"); } // Close button functionality closeButton3.onclick = () => { popupImage3.style.display = "none"; }; // Function to show the next image nextButton3.onclick = () => { currentIndex3 = (currentIndex3 + 1) % images3.length; // Loop back to the first image console.log("Next Image Index:", currentIndex3); // Debugging line popupImgElement3.src = images3[currentIndex3].getAttribute("src"); }; prevButton3.onclick = () => { currentIndex3 = (currentIndex3 - 1 + images3.length) % images3.length; // Loop back to the last image console.log("Previous Image Index:", currentIndex3); // Debugging line popupImgElement3.src = images3[currentIndex3].getAttribute("src"); }; // Add click event to each image in ACEOC document.querySelectorAll("#bgGDE .image-container3 img").forEach(image3 => { image3.onclick = () => showpp3(image3); });