Replaced video with slideshow

This commit is contained in:
Felix Albrigtsen 2021-10-10 22:01:27 +02:00
parent 9162ee70a7
commit 1c4eb5cfe4
3 changed files with 115 additions and 24 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

24
www/css/slideshow.css Normal file
View File

@ -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;
}

View File

@ -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"/> -->
<!-- HACK INCOMING! -->
<style>
.iframe-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
<!-- Statisk bilde:
<img class="logo" src="css/logo-white.png"/>
-->
<!-- Youtube-iframe:
<style>
.iframe-container {
position: relative;
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;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</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>
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</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">