Replaced video with slideshow
This commit is contained in:
parent
9162ee70a7
commit
1c4eb5cfe4
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
|
|
@ -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;
|
||||
}
|
||||
115
www/index.php
115
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"/> -->
|
||||
<!-- 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) */
|
||||
}
|
||||
|
||||
/* 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>
|
||||
<!-- 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>
|
||||
</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">
|
||||
|
|
|
|||
Reference in New Issue