Lightbox

				
					
// JavaScript for handling interactions and functionality
const thumbnails = document.querySelectorAll(".thumbnails img");
const thumbnailBtns = document.querySelectorAll(".thumbnail-button");
const enlargedPhoto = document.querySelector(".enlarged-photo");
const lightboxView = document.querySelector(".lightbox-view");
const lightboxImages = document.querySelectorAll(".lightbox-view img");
const lightboxImage = document.querySelector(
  ".lightbox-view .lightbox-content img"
);
const closeBtn = document.querySelector(".lightbox-view .close-btn");
const nextBtn = document.querySelector(".lightbox-view .next-btn");
const prevBtn = document.querySelector(".lightbox-view .prev-btn");
let currentImageIndex = 0;
let lastFocusedThumbnail = null;

// Function to update the enlarged photo on mouseover or focus
function updateEnlargedPhoto(event) {
  if (event.type === "mouseover") {
    enlargedPhoto.innerHTML = `<img decoding="async" src="${event.target.src}" alt="Enlarged image">`;
  } else if (event.type === "focus") {
    enlargedPhoto.innerHTML = `<img decoding="async" src="${
      event.target.querySelector("img").src
    }" alt="Enlarged image">`;
  }
}

// Function to manage focus trap within the lightbox view
function manageFocusTrap(event) {
  const focusableElements = [closeBtn, prevBtn, nextBtn];

  if (event.shiftKey && event.key === "Tab") {
    // If Shift + Tab is pressed, focus the last focusable element
    if (document.activeElement === closeBtn) {
      event.preventDefault();
      nextBtn.focus();
    } else if (document.activeElement === prevBtn) {
      event.preventDefault();
      closeBtn.focus();
    }
  } else if (event.key === "Tab") {
    // If Tab is pressed, focus the first focusable element
    if (document.activeElement === nextBtn) {
      event.preventDefault();
      closeBtn.focus();
    } else if (document.activeElement === closeBtn) {
      event.preventDefault();
      prevBtn.focus();
    }
  }
}

// Function to open the lightbox view with clicked image
function openLightbox(event) {
  let clickedImageSrc;
  if (event.target.tagName === "DIV") {
    clickedImageSrc = event.target.querySelector("img").src;
  } else {
    clickedImageSrc = event.target.src;
  }
  lightboxImages.forEach((image) => {
    image.src = clickedImageSrc;
  });
  lightboxView.classList.remove("hidden"); // Remove the hidden class
  lightboxView.style.display = "flex"; // Ensure the lightbox is displayed
  document.body.style.overflow = "hidden"; // Prevent scrolling on the main page
  lastFocusedThumbnail = event.currentTarget;

  // Attach focus trap event listener when the lightbox is opened
  document.addEventListener("keydown", manageFocusTrap);

  // Delay the focus on the close button after a short timeout
  setTimeout(() => {
    closeBtn.focus(); // Move focus to the close button
  }, 100); // Adjust the delay timing if needed
}

// Functionality to close the lightbox view
function closeLightbox() {
  lightboxView.classList.add("hidden"); // Hide the lightbox view
  document.body.style.overflow = "auto"; // Restore scrolling on the main page
  // Remove focus trap event listener when the lightbox is closed
  document.removeEventListener("keydown", manageFocusTrap);
  if (lastFocusedThumbnail) {
    lastFocusedThumbnail.focus(); // Return focus to the last focused thumbnail
  }
}

// Attach event listeners to thumbnails for hover and lightbox opening
thumbnails.forEach((thumbnail) => {
  thumbnail.addEventListener("mouseover", updateEnlargedPhoto);
  thumbnail.addEventListener("click", openLightbox);
});

thumbnailBtns.forEach((thumbnail) => {
  thumbnail.addEventListener("focus", updateEnlargedPhoto);
  thumbnail.addEventListener("click", openLightbox);
  thumbnail.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
      openLightbox(event);
    }
  });
});

// Functionality to close the lightbox view
closeBtn.addEventListener("click", closeLightbox);

// Function to update the lightbox with the current image
function updateLightboxImage() {
  thumbnails.forEach((thumbnail, index) => {
    if (index === currentImageIndex) {
      lightboxImage.src = thumbnail.src;
    }
  });
}

// Function to navigate to the next image
function goToNextImage() {
  currentImageIndex = (currentImageIndex + 1) % thumbnails.length;
  updateLightboxImage();
}

// Function to navigate to the previous image
function goToPrevImage() {
  currentImageIndex =
    (currentImageIndex - 1 + thumbnails.length) % thumbnails.length;
  updateLightboxImage();
}

// Functionality to navigate images using buttons and update lightbox image
nextBtn.addEventListener("click", goToNextImage);
prevBtn.addEventListener("click", goToPrevImage);

// Show the first image initially in the lightbox
updateLightboxImage();