Tooloop/Tooloop-Packages
2
0
Fork 0
mirror of https://github.com/Tooloop/Tooloop-Packages.git synced 2026-04-27 20:41:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

slideshow using /media/assets path (because snaps)

Browse Source
This commit is contained in:
Daniel Stock
2022-05-10 12:22:50 +02:00
parent 8d7613d530
commit f9a2d0c8d4
5 changed files with 72 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
image-slideshow/package/assets/presentation/slideshow.html
+66 -51
View File
@@ -1,68 +1,83 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slideshow</title>
<style media="screen">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
height: 100%;
width: 100%;
position:absolute;
z-index:1;
<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>
<style media="screen">
html,
body {
height: 100%;
margin: 0;
padding: 0;
background: black;
}
background-size: cover;
background-position: center center;
}
div.active{
z-index:3
}
</style>
.slide {
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
background-size: cover;
background-position: center center;
opacity: 0;
transition: opacity 1s;
}
.active {
opacity: 1;
z-index: 2;
}
.next {
z-index: 3;
}
</style>
</head>
<body>
<div id="slideshow">
<div class="slide active" style="background-image: url(/media/assets/data/image1.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image2.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image3.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image4.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image5.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image6.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image7.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image8.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image9.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image10.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image11.jpg)"></div>
<div class="slide" style="background-image: url(/media/assets/data/image12.jpg)"></div>
</div>
<div id="slideshow">
<div style="background-image: url(/assets/data/image1.jpg)" class="active"></div>
<div style="background-image: url(/assets/data/image2.jpg)" ></div>
<div style="background-image: url(/assets/data/image3.jpg)" ></div>
<div style="background-image: url(/assets/data/image4.jpg)" ></div>
<div style="background-image: url(/assets/data/image5.jpg)" ></div>
<div style="background-image: url(/assets/data/image6.jpg)" ></div>
<div style="background-image: url(/assets/data/image7.jpg)" ></div>
<div style="background-image: url(/assets/data/image8.jpg)" ></div>
<div style="background-image: url(/assets/data/image9.jpg)" ></div>
<div style="background-image: url(/assets/data/image10.jpg)" ></div>
<div style="background-image: url(/assets/data/image11.jpg)" ></div>
<div style="background-image: url(/assets/data/image12.jpg)" ></div>
</div>
<script type="text/javascript">
var active, next;
<script type='application/javascript' src='jquery-3.1.1.min.js'></script>
<script type="text/javascript">
function nextImage() {
active = document.querySelector("#slideshow .slide.active");
active.classList.remove("active");
function nextImage() {
var $active = $('#slideshow .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#slideshow div:first');
active = getNextSlide(active);
active.classList.add("active");
active.classList.remove("next");
$next.css('z-index', 2); // move the next image up the pile
next = getNextSlide(active)
next.classList.add("next")
}
$active.fadeOut(500, function() { // fade out the top image
$active.css('z-index',1).show().removeClass('active'); // reset the z-index and unhide the image
$next.css('z-index',3).addClass('active'); // make the next image the top one
});
}
function getNextSlide(slide) {
return slide.nextElementSibling ? slide.nextElementSibling : document.querySelectorAll("#slideshow .slide")[0];
}
$(document).ready(function(){
setInterval('nextImage()', 7000);
})
document.addEventListener("DOMContentLoaded", function () {
setInterval("nextImage()", 7000);
});
</script>
</script>
</body>
</html>
</html>