Skip to content

Instantly share code, notes, and snippets.

@bmontana

bmontana/slideshow.html

Created April 26, 2018 15:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bmontana/f37566b17d88912399b51b4c5f3c5cc5 to your computer and use it in GitHub Desktop.
Save bmontana/f37566b17d88912399b51b4c5f3c5cc5 to your computer and use it in GitHub Desktop.
Download ZIP
Slideshow template for Kiosk Project
Raw
slideshow.html
{% load static %}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="{% static 'kiosk/slideshow.css' %}"/>
{% comment %}
<script type="text/javascript" src="{% static 'kiosk/scripts/exitshow.js' %}"></script>
<script type="text/javascript" src="{% static 'kiosk/scripts/slideshow.js' %}"></script>
{% load js %}
<script language="JavaScript">
<!--
function slideshow() {
var fileList = "{{ images }}";
alert(fileList);
}
slideshow();
// -->
</script>
{% endcomment %}
<body onload="rotateImage('rImage')">
<script language="JavaScript">
<!--
var interval = 5000;
var random_display = 0;
var image_dir = ""
var ImageNum = 0;
var fileList = {{ images | safe }};
imageArray = new Array();
for ( ImageNum == 0; ImageNum < fileList.length; ImageNum++ ) {
imageArray[ImageNum] = new imageItem("{% static 'kiosk/slideshow/' %}" + fileList[ImageNum]);
}
var number_of_image = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
ImageNum = randNum(0, number_of_image-1);
}
else {
ImageNum = (ImageNum+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}
function getPrevImage() {
ImageNum = (ImageNum-1) % number_of_image;
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}
function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
document[place].title = new_image;
document[place].alt = new_image;
var recur_call = "rotateImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
// -->
</script>
{% comment %}
<!--
<table id="frame">
<tr>
<td class="frame-top" id="logo-cell" colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img id="logo" src="{% static 'kiosk/images/parish_logo_banner_blue.png' %}" height="100%" /> </td>
<td class="frame-top">&nbsp;</td>
<td class="frame-top" id="date-cell" colspan="2">Date/Time</td>
</tr>
<tr>
<td class="frame-side"></td>
<td id="image-cell" colspan="3">
<img id="image" name="rImage" src="" alt="" title=""/>
</td>
<td class="frame-side"></td>
</tr>
<tr>
<td class="frame-bottom" colspan="5"></td>
</tr>
</table>
-->
{% endcomment %}
<div id="page-div">
<div id="banner-div">
<div id="logo-div">
<img id="logo" src="{% static 'kiosk/images/parish_logo_banner_blue.png' %}" />
</div>
<div id="time-div">
Date/Time
</div>
</div>
<div id="image-div">
<img id="image" name="rImage" src="" alt="" title="" />
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment