Resolved JS screensaver / sleep mode for website with slideshow image [Archive]

View Full Version : Resolved JS screensaver / sleep mode for website with slideshow image

aiikhsan

04-06-2015, 03:33 AM

Base on Thread :
http://www.dynamicdrive.com/forums/showthread.php?63583-JS-screensaver-sleep-mode-for-website

can someone help me for the code that show more than one image on sleep demo above?
like slideshow when idle on the website..

Thank you very much.

- Ikhsan

jscheuer1

04-06-2015, 04:38 AM

For this to work we need to update to jQuery 1.8 and add a little code. The images array is where you set the paths to the various images you want to use (use as many as you like), the red 4000 is the number of milliseconds each image will be seen for. The images will be preloaded, but it would be best to keep them as small as possible byte wise to prevent the user having to wait for them to load. If larger images need to be used and this is a problem, I think I can work something out for that - let me know.

<!DOCTYPE html>
<html>
<head>
<title>Sleep Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var images = ['images/loading.gif', 'images/close.gif', 'images/next.gif'], imcount = -1,
$sleeper = $('<div style="display: none; width: 100%; height: 100%; background-color: black; position: fixed; top: 0; right: 0;">' +
'<img src="images/loading.gif" style="width: 100%; height: 100%; display: block;" width="100%" height="100%" alt="Click or Press Key to Return Image" title="Click or Press Key to Return"></div>')
.appendTo(document.body), timer, nofixed, scroll;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if($.browser.version < 7){
$sleeper.css({position: 'absolute'});
nofixed = true;
}
@end @*/
$.each(images, function(i, im){ //preload
$(new Image()).attr('src', im);
});
setInterval(function(){$sleeper.find('img').attr('src', images[imcount = (imcount + 1) % images.length]);}, 4000);
$(document).on('mousemove click keydown touchstart focusin', function(){
clearTimeout(timer);
preparetosleep();
if($sleeper.css('display') !== 'none'){
$sleeper.stop(true, true).hide('slow', function(){
if(scroll = $sleeper.data('scroll')){$(window).scrollTop(scroll[1]); $(window).scrollLeft(scroll[0]);}
});
$('html, body').css({width: '', height: '', margin: '', padding: '', overflow: ''});
}
});
function preparetosleep(){
timer = setTimeout(function(){
$sleeper.data('scroll', [$(window).scrollLeft(), $(window).scrollTop()]);
$('html, body').css({width: nofixed? $(window).width() : '100%', height: nofixed? $(window).height(): '100%', margin: 0, padding: 0, overflow: 'hidden'});
$sleeper.stop(true, true).show('slow');
}, 6000);
}
preparetosleep();
});
</script>
</head>
<body>
Hola!
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

Here's a version that checks to make sure an image is preloaded before attempting to display it, and which skips images entirely if they don't load for some reason:

<!DOCTYPE html>
<html>
<head>
<title>Sleep Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var images = ['images/loading.gif', 'images/close.gif', 'images/next.gif'], imcount = -1,
$sleeper = $('<div style="display: none; width: 100%; height: 100%; background-color: black; position: fixed; top: 0; right: 0;">' +
'<img src="images/loading.gif" style="width: 100%; height: 100%; display: block;" width="100%" height="100%" alt="Click or Press Key to Return Image" title="Click or Press Key to Return"></div>')
.appendTo(document.body), timer, nofixed, scroll, preloads = [];
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if($.browser.version < 7){
$sleeper.css({position: 'absolute'});
nofixed = true;
}
@end @*/
$.each(images, function(i, im){ //preload
$(new Image()).on('load error', function(e){
preloads[i] = e.type === 'error'? 'error' : 'loaded';
}).attr('src', im);
});
setInterval(function(){
imcount = (imcount + 1) % images.length;
if(!preloads[imcount] || preloads[imcount] === 'error'){return;}
$sleeper.find('img').attr('src', images[imcount]);
}, 4000);
$(document).on('mousemove click keydown touchstart focusin', function(){
clearTimeout(timer);
preparetosleep();
if($sleeper.css('display') !== 'none'){
$sleeper.stop(true, true).hide('slow', function(){
if(scroll = $sleeper.data('scroll')){$(window).scrollTop(scroll[1]); $(window).scrollLeft(scroll[0]);}
});
$('html, body').css({width: '', height: '', margin: '', padding: '', overflow: ''});
}
});
function preparetosleep(){
timer = setTimeout(function(){
$sleeper.data('scroll', [$(window).scrollLeft(), $(window).scrollTop()]);
$('html, body').css({width: nofixed? $(window).width() : '100%', height: nofixed? $(window).height(): '100%', margin: 0, padding: 0, overflow: 'hidden'});
$sleeper.stop(true, true).show('slow');
}, 6000);
}
preparetosleep();
});
</script>
</head>
<body>
Hola!
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

aiikhsan

04-06-2015, 09:03 AM

Thank you so much John,
the script work very well :)

jscheuer1

04-07-2015, 02:21 AM

You're welcome. Here's a deluxe edition that works with the latest jQuery and is a little smoother in form and function:

<!DOCTYPE html>
<html>
<head>
<title>Sleep Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var images = ['images/loading.gif', 'images/close.gif', 'images/next.gif'],
timebeforesleep = 6000, //milliseconds inactivity before sleep
imagedisplaytime = 4000, //nilliseconds each image shown during sleep
$sleeper = $('<div style="display: none; width: 100%; height: 100%; background-color: black; position: fixed; top: 0; right: 0;">' +
'<img src="' + images[0] + '" style="width: 100%; height: 100%; display: block;" width="100%" height="100%" alt="Click or Press Key to Return Image" title="Click or Press Key to Return"></div>')
.appendTo(document.body), timer, nofixed, scroll, preloads = [], imcounter = 0, ie7 = /MSIE (\d+)/.exec(navigator.userAgent), imginterval;
if(ie7 && ie7[1] < 8){
$sleeper.css({position: 'absolute'});
nofixed = true;
}
$.each(images, function(i, im){ //preload
$(new Image()).on('load error', function(e){
preloads[i] = e.type;
}).attr('src', im);
});
function rotateimage(){
imcounter = (imcounter + 1) % images.length;
if(!preloads[imcounter] || preloads[imcounter] === 'error'){ //skip missing images and those not yet loaded
rotateimage();
return;
}
$sleeper.find('img').attr('src', images[imcounter]);
}
$(document).on('mousemove click keydown touchstart focusin', function(){
clearTimeout(timer);
clearInterval(imginterval);
preparetosleep();
if($sleeper.css('display') !== 'none'){
$sleeper.stop(true, true).hide('slow', function(){
if(scroll = $sleeper.data('scroll')){$(window).scrollTop(scroll[1]); $(window).scrollLeft(scroll[0]);}
});
$('html, body').css({width: '', height: '', margin: '', padding: '', overflow: ''});
}
});
function preparetosleep(){
timer = setTimeout(function(){
clearInterval(imginterval);
imginterval = setInterval(rotateimage, imagedisplaytime);
$sleeper.data('scroll', [$(window).scrollLeft(), $(window).scrollTop()]);
$('html, body').css({width: nofixed? $(window).width() : '100%', height: nofixed? $(window).height(): '100%', margin: 0, padding: 0, overflow: 'hidden'});
$sleeper.stop(true, true).show('slow');
}, timebeforesleep);
}
preparetosleep();
});
</script>
</head>
<body>
Hola!
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

aiikhsan

04-08-2015, 12:51 AM

Thanks again for your help John. :)