mirror of
https://github.com/Tooloop/Tooloop-Packages.git
synced 2026-04-27 20:41:37 +02:00
slideshow using /media/assets path (because snaps)
This commit is contained in:
@@ -1,8 +1,8 @@
|
|||||||
Package: tooloop-image-slideshow
|
Package: tooloop-image-slideshow
|
||||||
Version: 0.1.0
|
Version: 1.0.0
|
||||||
Maintainer: vollstock <daniel@vollstock.de>
|
Maintainer: Tooloop Multimedia <daniel.stock@tooloop.de>
|
||||||
Homepage: https://www.vollstock.de
|
Homepage: https://www.tooloop.de
|
||||||
Bugs: https://github.com/vollstock/Tooloop-Examples
|
Bugs: https://github.com/tooloop/Tooloop-Packages
|
||||||
Section: tooloop/presentation
|
Section: tooloop/presentation
|
||||||
Architecture: all
|
Architecture: all
|
||||||
Depends: chromium-browser
|
Depends: chromium-browser
|
||||||
@@ -11,4 +11,3 @@ Description: Image slideshow with smooth transitions
|
|||||||
A simple example app using the chromium browser and some javascript to display
|
A simple example app using the chromium browser and some javascript to display
|
||||||
a fullscreen image slideshow.
|
a fullscreen image slideshow.
|
||||||
Thumbnail: image-slideshow-thumbnail.jpg
|
Thumbnail: image-slideshow-thumbnail.jpg
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -1,67 +1,82 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<title>Slideshow</title>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<style media="screen">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
html, body {
|
<title>Slideshow</title>
|
||||||
height: 100%;
|
<style media="screen">
|
||||||
margin: 0;
|
html,
|
||||||
padding: 0;
|
body {
|
||||||
}
|
height: 100%;
|
||||||
div {
|
margin: 0;
|
||||||
height: 100%;
|
padding: 0;
|
||||||
width: 100%;
|
background: black;
|
||||||
position:absolute;
|
}
|
||||||
z-index:1;
|
|
||||||
|
|
||||||
background-size: cover;
|
.slide {
|
||||||
background-position: center center;
|
height: 100%;
|
||||||
}
|
width: 100%;
|
||||||
div.active{
|
position: absolute;
|
||||||
z-index:3
|
z-index: 1;
|
||||||
}
|
background-size: cover;
|
||||||
</style>
|
background-position: center center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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">
|
<script type="text/javascript">
|
||||||
<div style="background-image: url(/assets/data/image1.jpg)" class="active"></div>
|
var active, next;
|
||||||
<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='application/javascript' src='jquery-3.1.1.min.js'></script>
|
function nextImage() {
|
||||||
<script type="text/javascript">
|
active = document.querySelector("#slideshow .slide.active");
|
||||||
|
active.classList.remove("active");
|
||||||
|
|
||||||
function nextImage() {
|
active = getNextSlide(active);
|
||||||
var $active = $('#slideshow .active');
|
active.classList.add("active");
|
||||||
var $next = ($active.next().length > 0) ? $active.next() : $('#slideshow div:first');
|
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
|
function getNextSlide(slide) {
|
||||||
$active.css('z-index',1).show().removeClass('active'); // reset the z-index and unhide the image
|
return slide.nextElementSibling ? slide.nextElementSibling : document.querySelectorAll("#slideshow .slide")[0];
|
||||||
$next.css('z-index',3).addClass('active'); // make the next image the top one
|
}
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
setInterval('nextImage()', 7000);
|
setInterval("nextImage()", 7000);
|
||||||
})
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
|
||||||
COMMAND="chromium-browser --noerrdialogs --kiosk --incognito /assets/presentation/slideshow.html"
|
COMMAND="chromium-browser --noerrdialogs --kiosk --incognito /media/assets/presentation/slideshow.html"
|
||||||
|
|
||||||
if [ $EUID == 0 ]; then
|
if [ $EUID == 0 ]; then
|
||||||
su tooloop -c "$COMMAND" &
|
su tooloop -c "$COMMAND" &
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
|
||||||
pkill chromium
|
killall chrome
|
||||||
|
|
||||||
exit 0
|
exit 0
|
||||||
|
|||||||
Reference in New Issue
Block a user