maison-diaporama/index.html

121 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Diaporama</title>
</head>
<style>
body {
font-family: verdana;
background: #333;
color: #fff;
height: 100vh;
padding: 0;
margin: 0;
}
.text-center {
text-align: center;
}
figcaption {
height: 30px;
line-height: 30px;
display: block;
}
figure {
padding: 0;
margin: 0;
}
figure img {
width: 100vw;
height: calc(100vh - 60px);
position: absolute;
top: 60px;
left: 0;
background-size: cover;
}
.slider {
height: 30px;
}
</style>
<body>
<div id="app">
<div class="text-center">
<div v-if="imagesToLoad == 0" class="slider">
<input type="range" id="volume" name="volume" min="0" v-model="imageIndex" :max="images.length - 1">
</div>
<div v-else>
Chargement en cours ({{ parseInt(100 * imagesLoaded / imagesToLoad) }}%)
</div>
<div v-if="imagesToLoad == 0 && images.length > 0">
<figure>
<figcaption v-text="images[imageIndex].date"></figcaption>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" :alt="images[imageIndex].date" :style="makeStyle(images[imageIndex].file)">
</figure>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
images: [],
imageIndex: -1,
imagesToLoad: 0,
imagesLoaded: 0,
}
},
methods: {
makeStyle(path) {
return {
'background-image': `url(${path})`
}
},
loadImages() {
images.forEach((info, i) => {
img = new Image()
img.onload = () => {
--this.imagesToLoad
++this.imagesLoaded
this.images[i] = info
}
img.onerror = () => {
--this.imagesToLoad
++this.imagesLoaded
console.log(`${info.file} not loaded!`)
}
img.src = info.file
})
}
},
mounted() {
fetch('images.json')
.then((response) => {
return response.json()
})
.then((json) => {
images = json.images
this.imageIndex = 0
this.imagesToLoad = images.length
this.loadImages()
})
}
}).mount('#app')
</script>
</body>
</html>