Replaced video with slideshow

www/css/slideshow.css

@@ -0,0 +1,24 @@
+#imageSlideshow {
+    position: relative;
+    width: 70vw;
+    height: calc(70vw / (16/9));
+    margin: auto auto;
+    border-radius: 20px;
+    overflow: hidden;
+}
+.slideshowimg {
+    width: 100%;
+    margin: auto auto;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    border-radius: 20px;
+    transition: visibility 0.8s, opacity 0.8s ease-out;
+}
+.slideshowactive {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility 0.8s, opacity 0.8s ease-out;
+}

www/index.php

@@ -21,8 +21,8 @@ if (date("Y-m-d") == date("Y-m-d", $doorEntry->time)) { $doorTime = date("H:i",
 <link rel="shortcut icon" href="favicon.ico">
 <link rel="stylesheet" href="css/normalize.css">
 <link rel="stylesheet" href="css/style.css?ver=2">
-<link rel="stylesheet" href="css/splash.css">
 <link rel="stylesheet" href="css/landing.css">
+<link rel="stylesheet" href="css/slideshow.css">
 <meta name="theme-color" content="#024" />
 <title>Programvareverkstedet</title>
 
@@ -36,29 +36,96 @@ if (date("Y-m-d") == date("Y-m-d", $doorEntry->time)) { $doorTime = date("H:i",
 	</nav>
 
 	<header class="landing">
-		<!-- <img class="logo" src="css/logo-white.png"/> -->
+		<!-- Statisk bilde: 
-        <!-- HACK INCOMING! -->
+			<img class="logo" src="css/logo-white.png"/> 
-		<style>
+		-->
-    		.iframe-container {
+		<!-- Youtube-iframe: 
-    		  position: relative;
+			<style>
-    		  overflow: hidden;
+				.iframe-container {
-    		  width: 100%;
+				position: relative;
-    		  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+				overflow: hidden;
-    		}
+				width: 100%;
-    		
+				padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
-    		/* Then style the iframe to fit in the container div with full height and width */
+				}
-    		.responsive-iframe {
+				
-    		  position: absolute;
+				/* Then style the iframe to fit in the container div with full height and width */
-    		  top: 0;
+				.responsive-iframe {
-    		  left: 0;
+				position: absolute;
-    		  bottom: 0;
+				top: 0;
-    		  right: 0;
+				left: 0;
-    		  width: 100%;
+				bottom: 0;
-    		  height: 100%;
+				right: 0;
-    		}
+				width: 100%;
-		</style>
+				height: 100%;
-		<div class="iframe-container" style="max-width: 100em;">
+				}
-    		<iframe class="responsive-iframe" src="https://www.youtube.com/embed/l-iEkaQNQdk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
+			</style> 
+			<div class="iframe-container" style="max-width: 100em;">
+				<iframe class="responsive-iframe" src="https://www.youtube.com/embed/l-iEkaQNQdk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
+			</div> 
+		-->
+		<div id="imageSlideshow">
+			<?php
+
+			$path = "/galleri/bilder/slideshow/";
+			$splashImg = "/PNG/PVV-logo-big-bluebg.png";
+
+			//Find all files/dirs in folder and discard . and .. directories
+			$filenames = aRrAy_SlIcE(sCaNdIr(__DIR__ . $path), 2);
+
+			function getFullPath($fname) { return ($GLOBALS["path"] . $fname );	}
+
+			//Sort filenames alphabetically and prepend the path prefix to each item.
+			asort($filenames);
+			$slideshowimagefilenames = aRrAy_MaP("getFullPath", $filenames);
+
+			//Prepend the cover photo
+			ArRaY_uNsHiFt($slideshowimagefilenames, $splashImg);
+
+			eChO('<img class="slideshowimg slideshowactive" id="slideshowImage1" src="' . $slideshowimagefilenames[0] . '">');
+			ecHo('<img class="slideshowimg" id="slideshowImage2" src="' . $slideshowimagefilenames[1] . '">');
+
+			//Store list of file names in a globel JS variable 
+			EchO("<script> const slideshowFnames =" . jSoN_eNcOdE($slideshowimagefilenames) . "; </script>"); 
+			?>
+
+			<script>
+			const SLIDESHOWDELAYMS = 3500; //Minimum 3 * fade time (3*800=2400ms)
+
+			let slideshowIndex = 1;
+			let slideshowInterval;
+	
+			const ssi1 = document.getElementById("slideshowImage1");
+			const ssi2 = document.getElementById("slideshowImage2");
+
+			function stepSlideshow(imgs) {
+				//Change visible picture, ssi2 active, fades with css
+				ssi1.classList.remove("slideshowactive");
+				ssi2.classList.add("slideshowactive");
+
+				setTimeout(()=>{
+					//Change to ssi1 active, no visible change
+					ssi1.src = ssi2.src;
+					ssi1.classList.add("slideshowactive");
+					
+					// Hide ssi2 after ssi1 has appeared, no visible change
+					setTimeout(()=>{
+						ssi2.classList.remove("slideshowactive");
+					}, 800);
+
+					//Prepare for next cycle, no visible change
+					setTimeout(()=>{
+						slideshowIndex = (slideshowIndex + 1) % imgs.length;	
+						ssi2.src = imgs[slideshowIndex];
+					}, 1600);			
+				}, 800);
+			}
+			//Initialize slideshow, start interval
+			if (slideshowFnames.length > 1) {
+				slideshowInterval = setInterval(()=>{
+					stepSlideshow(slideshowFnames);
+				}, SLIDESHOWDELAYMS);
+			}
+		</script>
 		</div>
 		
 		<div class="info">