Modal view, navbar, js folder structure

www/js/galleri.js

@@ -0,0 +1,25 @@
+// #region Modal
+var modal = document.getElementById('modal');
+
+var modalClose = document.getElementById('modal-close');
+modalClose.addEventListener('click', function() { 
+    modal.style.display = "none";
+});
+
+// global handler
+document.addEventListener('click', function (e) { 
+    if (e.target.className.indexOf('modal-target') !== -1) {
+        var img = e.target;
+        var modalImg = document.getElementById("modal-content");
+        var captionText = document.getElementById("modal-caption");
+        modal.style.display = "block";
+        modalImg.src = img.src;
+        captionText.innerHTML = img.alt;
+    }
+});
+// #endregion
+
+// #region sorting
+
+
+// #endregion

www/js/slideshow.js

@@ -0,0 +1,32 @@
+const SLIDESHOWDELAYMS = 3500;
+
+//Defined in slideshow.php: const slideshowFnames
+
+let slideshowIndex = 1;
+let slideshowInterval;
+
+let ssi1 = document.getElementById("slideshowImage1");
+let ssi2 = document.getElementById("slideshowImage2");
+
+
+function stepSlideshow(imgs) {
+    //Swap image elements
+    let tmp = ssi1;
+    ssi1 = ssi2;
+    ssi2 = tmp;
+    //Swap visibility
+    ssi2.classList.remove("slideshowactive");
+    ssi1.classList.add("slideshowactive");
+    setTimeout(()=>{
+        //Change source to next picture after it is faded out
+        slideshowIndex = (slideshowIndex + 1) % imgs.length; 
+        ssi2.src = slideshowFnames[slideshowIndex];
+    }, 800);  
+}
+
+//Initialize slideshow, start interval
+if (slideshowFnames.length > 1) {
+    slideshowInterval = setInterval(()=>{
+        stepSlideshow(slideshowFnames);
+    }, SLIDESHOWDELAYMS);
+}