projects-gallery-app/script.js at main · onebyte0x00/projects-gallery-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
document.addEventListener('DOMContentLoaded', function() {
    // DOM elements
    const albumSelector = document.getElementById('album-selector');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const currentImage = document.getElementById('current-image');
    const imageInfo = document.getElementById('image-info');
    const thumbnailContainer = document.getElementById('thumbnail-container');

    // State variables
    let currentAlbum = '';
    let currentIndex = 0;
    let images = [];

    // Album data
    const albums = {
        img1: [
            { src: 'img/img1/photo1.jpg', alt: 'Photo 1 from Album 1' },
            { src: 'img/img1/photo2.jpg', alt: 'Photo 1 from Album 1' },
            { src: 'img/img1/photo3.jpg', alt: 'Photo 3 from Album 1' }
            // Add more
        ],
        img2: [
            { src: 'img/img2/photo1.jpg', alt: 'Photo 1 from Album 2' },
            { src: 'img/img2/photo2.jpg', alt: 'Photo 2 from Album 2' },
            { src: 'img/img2/photo3.jpg', alt: 'Photo 3 from Album 2' }
            // Add more
        ]
        // Add more albums as needed
    };

    // Event listeners
    albumSelector.addEventListener('change', loadAlbum);
    prevBtn.addEventListener('click', showPreviousImage);
    nextBtn.addEventListener('click', showNextImage);

    // Functions
    function loadAlbum() {
        currentAlbum = albumSelector.value;

        if (!currentAlbum) {
            // No album selected
            currentImage.src = '';
            currentImage.alt = '';
            imageInfo.textContent = '';
            thumbnailContainer.innerHTML = '';
            return;
        }

        images = albums[currentAlbum];
        currentIndex = 0;
        displayCurrentImage();
        createThumbnails();
    }

    function displayCurrentImage() {
        if (images.length === 0) return;

        const image = images[currentIndex];
        currentImage.src = image.src;
        currentImage.alt = image.alt;
        imageInfo.textContent = `${currentIndex + 1} of ${images.length}: ${image.alt}`;

        // Update button states
        prevBtn.disabled = currentIndex === 0;
        nextBtn.disabled = currentIndex === images.length - 1;
    }

    function createThumbnails() {
        thumbnailContainer.innerHTML = '';

        images.forEach((image, index) => {
            const thumbnail = document.createElement('img');
            thumbnail.src = image.src;
            thumbnail.alt = image.alt;
            thumbnail.className = 'thumbnail';

            thumbnail.addEventListener('click', () => {
                currentIndex = index;
                displayCurrentImage();
            });

            thumbnailContainer.appendChild(thumbnail);
        });
    }

    function showPreviousImage() {
        if (currentIndex > 0) {
            currentIndex--;
            displayCurrentImage();
        }
    }

    function showNextImage() {
        if (currentIndex < images.length - 1) {
            currentIndex++;
            displayCurrentImage();
        }
    }

    // Initialize with first album
    albumSelector.value = 'img1';
     loadAlbum();
});