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
51 lines
1.6 KiB
4 months ago
|
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()
|