kayomn
/
kayomn.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make slideshow halt during mouse hover

This commit is contained in:
kayomn 2024-06-24 09:48:45 +01:00
parent a3edf5449b
commit 9e1678b810
1 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
templates/index.html
View File

@ -15,13 +15,13 @@
<a href="https://www.youtube.com/watch?v=zm8Sx6cVbmM"> <a href="https://www.youtube.com/watch?v=zm8Sx6cVbmM">
<div class="title">Afterglow</div> <div class="title">Afterglow</div>
<img src="/showreel/afterglow.png" /> <img src="/showreel/afterglow.png" />
<div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div> <div class="summary">Work-in-progress immersive sim experiment built using the Ona game engine.</div>
</a> </a>
<a href="https://www.youtube.com/watch?v=ijJhM8nfthw"> <a href="https://www.youtube.com/watch?v=ijJhM8nfthw">
<div class="title">Afterglow</div> <div class="title">Afterglow</div>
<img src="/showreel/afterglow-menu.png" /> <img src="/showreel/afterglow-menu.png" />
<div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div> <div class="summary">Work-in-progress immersive sim experiment built using the Ona game engine.</div>
</a> </a>
<a href="https://sauce.pizzawednes.day/protectorate/game"> <a href="https://sauce.pizzawednes.day/protectorate/game">
@ -121,34 +121,44 @@
</style> </style>
<script type="module"> <script type="module">
const slideshowIntervalSeconds = 7.5; const slideshowIntervalSeconds = 5;
window.addEventListener("load", async () => { window.addEventListener("load", async () => {
let slideshows = document.getElementsByClassName("slideshow") let slideshows = document.getElementsByClassName("slideshow");
for (let slideshow of slideshows) { for (let slideshow of slideshows) {
if (!slideshow.hasChildNodes()) { if (!slideshow.hasChildNodes()) {
continue; continue;
} }
let slideIndex = 0 let slideIndex = 0;
let intervalId;
setInterval(() => { const startSlideshow = () => {
let children = slideshow.children intervalId = setInterval(() => {
let children = slideshow.children;
slideIndex = (slideIndex + 1) % children.length;
slideIndex = (slideIndex + 1) % children.length for (let index = 0; index < children.length; index += 1) {
children[index].style.display = (index === slideIndex) ? "block" : "none";
}
}, slideshowIntervalSeconds * 1000);
};
for (let index = 0; index < children.length; index += 1) slideshow.addEventListener("mouseenter", () => {
children[index].style.display = (index == slideIndex) ? "block" : "none" clearInterval(intervalId);
}, slideshowIntervalSeconds * 1000) });
let children = slideshow.children slideshow.addEventListener("mouseleave", startSlideshow);
children[0].style.display = "block" let children = slideshow.children;
children[0].style.display = "block";
for (let index = 1; index < children.length; index += 1) { for (let index = 1; index < children.length; index += 1) {
children[index].style.display = "none" children[index].style.display = "none";
} }
startSlideshow();
} }
}); });
</script> </script>