-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslideshow.html
98 lines (88 loc) · 3.8 KB
/
slideshow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
html, body, .wrapper {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #2e2e2e;
color: #ebebeb;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.select {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 1.5rem;
cursor: pointer;
}
.select__icon {
padding: 0.5rem;
width: 4rem;
height: 4rem;
}
.select__text {
margin: 0;
padding: 0.5rem;
}
.slideshow-wrapper {
position: absolute;
left: 0;
top: 0;
display: flex ;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
object-fit: contain;
background-color: black;
}
.slideshow-img {
max-width: 100%;
max-height: 100%
}
</style>
<script>
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
}
</script>
</head>
<body>
<div class="wrapper" x-data="{ images: [], showDuration: 4000 }" @keyup.document.enter="toggleFullScreen()" @keyup.document.esc="images = []">
<input id="images" type="file" accept="image/png, image/jpeg" multiple @change="images = [...$event.target.files];" hidden></input>
<label for="images" class="select">
<!-- heroicons | Photo | 24px outline -->
<svg class="select__icon"" data-darkreader-inline-stroke="" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<p class="select__text"><strong>Click</strong> to choose pictures and start slideshow</p>
<p class="select__text">Press to <strong>enter</strong> fullscreen mode</p>
</label>
<template x-for="(image, index) in images" :key="image.name">
<div class="slideshow-wrapper" x-data="{ show: false }" :style="{ 'z-index': images.length - index }" x-show="show" x-effect="show = true; if (index + 1 != images.length) {setTimeout(() => show = false, (index + 1) * showDuration); setInterval(() => {show = true; setTimeout(() => show = false, (index + 1) * showDuration)}, images.length * showDuration)}" x-transition.opacity.duration.1000ms>
<img class="slideshow-img" x-effect="$el.src = URL.createObjectURL(image);" @load="URL.revokeObjectURL($el.src)">
</div>
</template>
</div>
</body>
</html>