https://www.namuseum.gr/wp-content/themes/nam/dist/assets/js/vr-modal.js?ver=1.1.2

1(function audio() {
2    const playButton = document.querySelector(".button");
3    const audio = document.querySelector("audio");
4    const currentTime = document.querySelector(".currentTime");
5    const duration = document.querySelector(".duration");
6    const audioBar = document.querySelector(".audio-bar");
7    const progress = document.querySelector(".progress");
8    if (audio) {
9        window.addEventListener('load', (event) => {
10            duration.textContent = formatTime(audio.duration);
11        });
12        playButton.addEventListener("click", function () {
13            if (audio.paused) {
14                audio.play();
15                playButton.classList.add('pause');
16            } else {
17                audio.pause()
18                playButton.classList.remove('pause');
19            }
20        })
21        audio.addEventListener("timeupdate", function () {
22            var updatedTime = audio.currentTime;
23            var played = (updatedTime / audio.duration) * 100;
24
25            progress.style.width = played.toFixed(4) + "%";
26            currentTime.textContent = formatTime(updatedTime);
27
28        })
29
30        audioBar.addEventListener("click", function (e) {
31            var rect = e.target.getBoundingClientRect();
32            var x = e.clientX - rect.left;
33            var percentage = parseInt((x / audioBar.clientWidth) * 100);
34            var audioTime = audio.duration * (percentage / 100);
35            audio.currentTime = audioTime;
36
37        })
38
39    }
40
41    function formatTime(seconds) {
42        minutes = Math.floor(seconds / 60);
43        minutes = (minutes >= 10) ? minutes : "0" + minutes;
44        seconds = Math.floor(seconds % 60);
45        seconds = (seconds >= 10) ? seconds : "0" + seconds;
46        return minutes + ":" + seconds;
47    }
48    var imagewrappers = document.querySelectorAll(".imgwrapper ");
49    imagewrappers.forEach(function (imagewrapper, i) {
50        var image = imagewrapper.childNodes[1];
51        
52        imagewrapper.addEventListener('click', function (e) {
53            e.preventDefault();
54            var caption = null;
55            image.nextSibling.nextSibling.childNodes[1] ? caption = image.nextSibling.nextSibling.childNodes[1].cloneNode(true) : null;
56            $("body").append(
57                `<div class="lightbox">
58              <span class="arrow-left"></span>
59              <img class="lightbox-image" src="${image.href}">
60              ${caption ? `<span class="caption">${caption.innerHTML}</span>` : `<span class="caption"></span>`}
61              <span class="arrow-right"></span>
62              <span class="close-icon"></span>
63              </div>`
64            );
65            document.querySelector(".arrow-right").addEventListener('click', function () {
66                i++;
67                if (i > imagewrappers.length - 1) {
68                    i = 0;
69                    $(".lightbox .lightbox-image").attr("src", `${imagewrappers[i].childNodes[1].href}`);
70                    if(imagewrappers[i].childNodes[1].nextSibling.nextSibling.childNodes[1]){
71                        document.querySelector(".lightbox .caption").innerHTML = imagewrappers[i].childNodes[1].nextSibling.nextSibling.childNodes[1].innerHTML;
72                    } else{
73                        document.querySelector(".lightbox .caption") ? document.querySelector(".lightbox .caption").innerHTML = null : null;
74                    }
75                } else {
76                    $(".lightbox .lightbox-image").attr("src", `${imagewrappers[i].childNodes[1].href}`);
77                    if(imagewrappers[i].childNodes[1].nextSibling.nextSibling.childNodes[1]) {
78                        document.querySelector(".lightbox .caption").innerHTML = imagewrappers[i].childNodes[1].nextSibling.nextSibling.childNodes[1].innerHTML;
79                    } else{
80                        document.querySelector(".lightbox .caption") ? document.querySelector(".lightbox .caption").innerHTML = null: null;
81                    }
82                }
83            });
84            document.querySelector(".arrow-left").addEventListener('click', function () {
85                i--;
86                if (i < 0) {
87                    i = imagewrappers.length - 1;
88                    $(".lightbox .lightbox-image").attr("src", `${imagewrappers[i].childNodes[1].href}`);
89                    if(imagewrappers[i].childNodes[1].nextSibling.nextSibling.childNodes[1]) {
90                        document.querySelector(".lightbox .caption").innerHTML = imagewrappers[i].childNodes[1].nextSibling.nextSibling.childNodes[1].innerHTML;
91                    } else{
92                        document.querySelector(".lightbox .caption") ? document.querySelector(".lightbox .caption").innerHTML = null: null;
93                    }
94                } else {
95                    $(".lightbox .lightbox-image").attr("src", `${imagewrappers[i].childNodes[1].href}`);
96                    if(imagewrappers[i].childNodes[1].nextSibling.nextSibling.childNodes[1]) {
97                        document.querySelector(".lightbox .caption").innerHTML = imagewrappers[i].childNodes[1].nextSibling.nextSibling.childNodes[1].innerHTML;
98                    }else{
99                        document.querySelector(".lightbox .caption") ? document.querySelector(".lightbox .caption").innerHTML = null: null;
100                    }
101                }
102            });
103            document.querySelector(".close-icon").addEventListener('click', function () {
104                $(".lightbox").remove();
105            });
106        })
107    })
108    // document.body.addEventListener('click',function(e){

109    //     var next = document.querySelector(".arrow-right");
110    //     var previous = document.querySelector(".arrow-left");
111    //     var image = document.querySelector("lightbox-image");
112    //     if(e.target !== next && e.target !== previous && e.target !== image ) {
113    //         if($(".lightbox").is(":visible")){
114    //             console.log('here')
115    //         }
116    //     }
117    // })
118})();