script.js

// Select necessary elements
// const toggle = document.querySelector('.navbar-toggle');
// const menu = document.querySelector('.navbar-menu');


const navbarToggle = document.getElementById('navbar-toggle');
const navbarMenu = document.querySelector('.navbar-menu');

navbarToggle.addEventListener('click', () => {
  navbarMenu.classList.toggle('active');
});
function toggleMenu() {
  const menu = document.querySelector('.navbar-menu');
  menu.classList.toggle('active');
}


const galleryItems = document.querySelectorAll('.gallery-item img');
const lightbox = document.createElement('div');
lightbox.className = 'lightbox';
document.body.appendChild(lightbox);

const lightboxContent = document.createElement('div');
lightboxContent.className = 'lightbox-content';
lightbox.appendChild(lightboxContent);

const lightboxImage = document.createElement('img');
lightboxImage.className = 'lightbox-image';
lightboxContent.appendChild(lightboxImage);

const caption = document.createElement('p');
caption.className = 'lightbox-caption';
lightboxContent.appendChild(caption);

const downloadBtn = document.createElement('a');
downloadBtn.className = 'action-btn';
downloadBtn.innerHTML = '📥 Download'; // Download icon
lightboxContent.appendChild(downloadBtn);

const shareBtn = document.createElement('button');
shareBtn.className = 'action-btn';
shareBtn.innerHTML = '📤 Share'; // Share icon
lightboxContent.appendChild(shareBtn);

const closeBtn = document.createElement('span');
closeBtn.className = 'close-btn';
closeBtn.innerHTML = '×'; // Close icon
lightboxContent.appendChild(closeBtn);

const prevBtn = document.createElement('button');
prevBtn.className = 'prev-btn';
prevBtn.innerHTML = '❮'; // Left arrow
lightboxContent.appendChild(prevBtn);

const nextBtn = document.createElement('button');
nextBtn.className = 'next-btn';
nextBtn.innerHTML = '❯'; // Right arrow
lightboxContent.appendChild(nextBtn);


toggle.addEventListener('click', () => {
  menu.classList.toggle('active');
});

// Image data array
const imageData = [...galleryItems].map(item => ({
  src: item.src,
  alt: item.alt
}));

// Current index tracker
let currentIndex = 0;

// Open Lightbox
const openLightbox = index => {
  currentIndex = index;
  const { src, alt } = imageData[index];
  lightboxImage.src = src;
  caption.textContent = alt;
  downloadBtn.href = src;
  downloadBtn.download = `krishna-${index + 1}.jpg`;
  lightbox.style.display = 'flex';
};

// Close Lightbox
const closeLightbox = () => {
  lightbox.style.display = 'none';
};

// Navigate to Previous Image
const showPrevImage = () => {
  currentIndex = (currentIndex - 1 + imageData.length) % imageData.length;
  openLightbox(currentIndex);
};

// Navigate to Next Image
const showNextImage = () => {
  currentIndex = (currentIndex + 1) % imageData.length;
  openLightbox(currentIndex);
};

// Share Image
const shareImage = async () => {
  const imageUrl = imageData[currentIndex].src;
  if (navigator.share) {
    try {
      await navigator.share({
        title: 'Krishna Gallery',
        text: 'Check out this beautiful image of Krishna!',
        url: imageUrl
      });
    } catch (error) {
      console.error('Error sharing:', error);
    }
  } else {
    alert('Share API not supported in this browser.');
  }
};

// Event Listeners
galleryItems.forEach((item, index) => {
  item.addEventListener('click', () => openLightbox(index));
});

closeBtn.addEventListener('click', closeLightbox);
prevBtn.addEventListener('click', showPrevImage);
nextBtn.addEventListener('click', showNextImage);
shareBtn.addEventListener('click', shareImage);
lightbox.addEventListener('click', event => {
  if (event.target === lightbox) closeLightbox();
});

// Keyboard Navigation
document.addEventListener('keydown', event => {
  if (lightbox.style.display === 'flex') {
    switch (event.key) {
      case 'ArrowLeft':
        showPrevImage();
        break;
      case 'ArrowRight':
        showNextImage();
        break;
      case 'Escape':
        closeLightbox();
        break;
    }
  }
});