<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slideshow</title>
<style>
body {
overflow: hidden;
cursor: none;
}
#page2 {
display: none;
}
</style>
<html>
<head>
<title>Slideshow</title>
<style>
body {
overflow: hidden;
cursor: none;
}
#page2 {
display: none;
}
</style>
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var slideshow;
var iteration = 0;
var timer;
var slideshow_count = 0;
var op;
var fade_timer;
var current_page = 1;
//Initialize the slideshow settings from the json config file
$(document).ready(function() {
//This primes the loop and gets everything going
//We're using the ajax method instead of getJSON because caching is automatically
//turned off with the .ajax call. Also, when specifying the dataType jsonp,
//the returned json data is automatically placed into a script tag and executed
//with the callback function. Our data source here has a static callback called
//slideshow_settings, so we don't have to pass anything extra in.
$.ajax({
url: "slideshow_settings.json",
dataType: "jsonp"
});
});
function get_next_iteration () {
if (iteration + 1 >= slideshow_count) {
return 0;
}
else {
return iteration + 1;
}
}
function other_page () {
if (current_page == 1) {
return 2;
}
else {
return 1;
}
}
function slideshow_settings (settings) {
iteration = -1;
slideshow = settings;
slideshow_count = settings.dashboards.length;
do_next();
}
function switch_pages () {
$('#page' + current_page).fadeOut(1000, function() {
$(this).css('display', 'none')
$('#page' + other_page()).fadeOut(0, function() {
$(this).fadeIn(1000, function() {
current_page = other_page();
$('#page' + other_page()).attr('src', slideshow.dashboards[get_next_iteration()].url);
timer = setTimeout(do_next, (slideshow.dashboards[iteration].duration * 1000));
});
});
});
}
timer = setTimeout(do_next, (slideshow.dashboards[iteration].duration * 1000));
});
});
});
}
//Clean up after ourselves to prevent memory leaks
clearTimeout(timer);
//Loop has started anew. Check our config file again.
if (iteration+1 >= slideshow_count ) {
$.ajax({
url: "slideshow_settings.json",
dataType: "jsonp"
});
}
//Do the work
else {
iteration++;
switch_pages();
}
}
</script>
</head>
<body style="margin: 0px; scroll: off; background: black;">
<iframe id="page1" style="width: 1920px; height: 1080px; border: 0px;"></iframe>
<iframe id="page2" style="width: 1920px; height: 1080px; border: 0px;"></iframe>
</body>
</html>
No comments:
Post a Comment