markverse.github.io/script.js at main · hchoki/markverse.github.io · 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
window.addEventListener('DOMContentLoaded', function() {
    var slideshowContainer = document.getElementById('slideshow-container');

    var priorityImages = [
        'images/somna-1.png',
        'images/somna-2.png',
        'images/somna-3.png',
        'images/somna-4.png',
        'images/somna-5.png',
        'images/somna-6.png',
        'images/somna-7.png',
        'images/somna-8.png',
        'images/somna-9.png',
        'images/somna-10.png',
        'images/somna-11.png',
        'images/somna-12.png',
        'images/somna-13.png',
        'images/somna-14.png',
        'images/somna-15.png',
        'images/somna-16.png',
        'images/somna-17.png',
        'images/somna-18.png',
        'images/somna-19.png',
    ];

    var extraImages = [
        'images/VRChat_2024-06-07_22-11-09.png',
        'images/avali1.png',
        'images/umbra4.png',
        'images/Mark-Zuckerberg-Spooks-the-Internet-With-Too-Much-Sunscreen-on-His-Face-in-Hawaii-01.jpeg',
        'images/umbra1.png',
        'images/avali2.png',
        'images/VRChat_2024-06-07_22-11-09.png',
        'images/avali3.png',
        'images/umbra5.png',
        'images/umbra2.png',
        'images/VRChat_2024-06-08_20-57-33.018_2560x1440.png',
        'images/umbra3.png',
        'images/umbra6.png',
        'images/VRChat_2024-06-07_01-37-34.697_1920x1080.png',
        'images/VRChat_2024-06-08_21-00-08.892_2560x1440.png',
        'images/avali4.png',
        'images/hecka.png',
        'images/ritualneo.jpg',
        'images/paris1.png',
        'images/heliflelfon.png',
        'images/titanic4.png',
        'images/CurtainRod.png',
        'images/Donkeysaur.png',
        'images/paris3.png',
        'images/Mark-Zuckerberg-Spooks-the-Internet-With-Too-Much-Sunscreen-on-His-Face-in-Hawaii-01.jpeg',
        'images/avali5.png',
        'images/image1.png',
        'images/mouthplay2.png',
        'images/image.png',
        'images/titanic3.png',
        'images/paris4.png',
        'images/VRChat_2023-05-27_02-27-31.591_1920x1080.png',
        'images/mouthplay3.png',
        'images/nerdy1.png',
        'images/VRChat_2023-06-02_05-32-49.894_1920x1080.png',
        'images/titanic2.png',
        'images/nerdy2.png',
        'images/paris2.png',
        'images/mouthplay1.png',
        'images/VRChat_2023-06-03_00-20-16.117_1920x1080.png',
        'images/titanic1.png',
        'images/nerdy3.png',
        'images/VRChat_2023-06-03_00-22-20.975_1920x1080.png',
        'images/nerdy4.png',
    ];

    // Fisher-Yates shuffle
    function shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
    }

    shuffle(priorityImages);
    shuffle(extraImages);

    // Combine arrays: priority first, then extra
    var imageUrls = priorityImages.concat(extraImages);

    function createSlide(imageUrl) {
        var slide = document.createElement('div');
        slide.className = 'slide';
        slide.style.backgroundImage = 'url(' + imageUrl + ')';
        return slide;
    }

    function createSlides(imageUrls) {
        var slides = [];

        imageUrls.forEach(function(imageUrl) {
            var slide = createSlide(imageUrl);
            slides.push(slide);
            slideshowContainer.appendChild(slide);
        });

        return slides;
    }

    function showSlides(slides) {
        var slideIndex = 0;

        slides[slideIndex].style.opacity = '1'; // Set the initial opacity of the first slide to 1

        setInterval(function() {
            slides.forEach(function(slide) {
                slide.style.opacity = '0';
            });

            slideIndex++;

            if (slideIndex >= slides.length) {
                slideIndex = 0;
            }

            slides[slideIndex].style.opacity = '1';
        }, 5000);
    }

    var slides = createSlides(imageUrls);
    showSlides(slides);
    slideshowContainer.style.opacity = '1'; // Set opacity to 1 after the page loads
});