Created
April 26, 2018 15:42
-
-
Save bmontana/f37566b17d88912399b51b4c5f3c5cc5 to your computer and use it in GitHub Desktop.
Slideshow template for Kiosk Project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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"> <img id="logo" src="{% static 'kiosk/images/parish_logo_banner_blue.png' %}" height="100%" /> </td> | |
<td class="frame-top"> </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