73 lines
1.8 KiB
HTML
73 lines
1.8 KiB
HTML
<html lang="de" style="overflow: hidden;">
|
|
<head>
|
|
<style>
|
|
body {
|
|
background-color: #000;
|
|
margin: 0;
|
|
}
|
|
|
|
#image_container {
|
|
position: relative;
|
|
}
|
|
|
|
#image_blur {
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
position: relative;
|
|
filter: blur(20px) brightness(50%);
|
|
}
|
|
|
|
#image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
}
|
|
</style>
|
|
<title>SlideShow</title>
|
|
</head>
|
|
<body>
|
|
<div id="image_container">
|
|
<div id="image_blur"></div>
|
|
<div id="image"></div>
|
|
</div>
|
|
</body>
|
|
|
|
<script type="module">
|
|
import PocketBase from './js/pocketbase/pocketbase.esm.js'
|
|
|
|
const sliderArrayQuery = [];
|
|
|
|
const pb = new PocketBase('http://127.0.0.1:8090');
|
|
|
|
const media = pb.collection('media').getFullList(2000, {
|
|
sort: '-created',
|
|
});
|
|
|
|
media.then(
|
|
it => it.forEach((arrObj) => {
|
|
sliderArrayQuery.push(new Slider(arrObj.collectionId, arrObj.collectionName, arrObj.created, arrObj.duration, arrObj.enabled, arrObj.id, arrObj.media, arrObj.updated))
|
|
})
|
|
).then(_ => {
|
|
let sliderArray = sliderArrayQuery.filter(mediaObjekt => {
|
|
return mediaObjekt.enabled === true
|
|
})
|
|
let slideshow = new Slideshow('#image_container', sliderArray, '', true, true, 0)
|
|
startSlideShow(slideshow)
|
|
})
|
|
;
|
|
|
|
</script>
|
|
<script src="js/slideshow.js"></script>
|
|
|
|
</html> |