personal garden & website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

51 lines
1.6 KiB

const box = document.getElementById('project-container-gallery')
let x, y
function init(){
x = 0
y = 0
AnimateSkybox()
}
function AnimateSkybox(){
x += 1
box.style.backgroundPosition = x + "px " + y + "px"
requestAnimationFrame(AnimateSkybox)
}
// Wait for the DOM to fully load
document.addEventListener("DOMContentLoaded", function() {
// Get all gallery images
const galleryImages = document.querySelectorAll("#image-gallery .gallery-image");
// Get the focused image container and the focused image
const focusedImageContainer = document.getElementById("focused-image-container");
const focusedImage = document.querySelector(".focused-image");
// Get the gallery container
const galleryContainer = document.getElementById("image-gallery");
// Get the close button
const closeButton = document.getElementById("close-button");
// Add click event listeners to each gallery image
galleryImages.forEach(image => {
image.addEventListener("click", function() {
// Hide the gallery
galleryContainer.style.display = "none";
// Update the src of the focused image to the src of the clicked image
focusedImage.src = this.src;
// Show the focused image container
focusedImageContainer.style.display = "flex";
});
});
// Add click event listener to the close button
closeButton.addEventListener("click", function() {
// Hide the focused image container
focusedImageContainer.style.display = "none";
// Show the gallery
galleryContainer.style.display = "flex";
});
});
init()