script.js

// Simple JavaScript for beginners

let currentImageIndex = 0;
let allImages = [];

// Get all images when page loads
window.onload = function () {
    allImages = document.querySelectorAll('.image-item img');
};

// Filter images by category
function filterImages(category) {
    const items = document.querySelectorAll('.image-item');
    const buttons = document.querySelectorAll('.filter-btn');

    // Remove active class from all buttons
    buttons.forEach(btn => btn.classList.remove('active'));

    // Add active class to clicked button
    event.target.classList.add('active');

    // Show/hide images based on category
    items.forEach(item => {
        if (category === 'all' || item.dataset.category === category) {
            item.classList.remove('hidden');
        } else {
            item.classList.add('hidden');
        }
    });
}

// Open lightbox
function openLightbox(clickedImg) {
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');

    // Find the index of clicked image
    for (let i = 0; i < allImages.length; i++) {
        if (allImages[i] === clickedImg) {
            currentImageIndex = i;
            break;
        }
    }

    lightboxImg.src = clickedImg.src;
    lightbox.style.display = 'block';
}

// Close lightbox
function closeLightbox() {
    document.getElementById('lightbox').style.display = 'none';
}

// Change image in lightbox (next/previous)
function changeImage(direction) {
    currentImageIndex += direction;

    // Loop around if at beginning or end
    if (currentImageIndex >= allImages.length) {
        currentImageIndex = 0;
    }
    if (currentImageIndex < 0) {
        currentImageIndex = allImages.length - 1;
    }

    document.getElementById('lightbox-img').src = allImages[currentImageIndex].src;
}

// Close lightbox when pressing Escape key
document.addEventListener('keydown', function (event) {
    if (event.key === 'Escape') {
        closeLightbox();
    }
    if (event.key === 'ArrowLeft') {
        changeImage(-1);
    }
    if (event.key === 'ArrowRight') {
        changeImage(1);
    }
});

// Prevent lightbox from closing when clicking on image
document.getElementById('lightbox-img').onclick = function (event) {
    event.stopPropagation();
};

document.querySelector('.prev').onclick = function (event) {
    event.stopPropagation();
    changeImage(-1);
};

document.querySelector('.next').onclick = function (event) {
    event.stopPropagation();
    changeImage(1);
};