Results 1 to 5 of 5

Thread: JS screensaver / sleep mode for website with slideshow image

  1. #1
    Join Date
    Apr 2015
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default JS screensaver / sleep mode for website with slideshow image

    Base on Thread :
    http://www.dynamicdrive.com/forums/s...de-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
    Last edited by aiikhsan; 04-06-2015 at 09:11 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,412
    Thanks
    45
    Thanked 3,267 Times in 3,228 Posts
    Blog Entries
    12

    Default

    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.

    Code:
    <!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!
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </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:

    Code:
    <!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!
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </body>
    </html>
    Last edited by jscheuer1; 04-06-2015 at 05:30 AM. Reason: change from bind to on, add touchstart and focusin
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    aiikhsan (04-06-2015)

  4. #3
    Join Date
    Apr 2015
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much John,
    the script work very well

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,412
    Thanks
    45
    Thanked 3,267 Times in 3,228 Posts
    Blog Entries
    12

    Default

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

    Code:
    <!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!
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    aiikhsan (04-08-2015)

  7. #5
    Join Date
    Apr 2015
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks again for your help John.

Similar Threads

  1. Resolved JS screensaver / sleep mode for website?
    By davelf in forum Looking for such a script or service
    Replies: 4
    Last Post: 07-27-2011, 03:05 AM
  2. Replies: 2
    Last Post: 07-02-2011, 08:26 AM
  3. Can I loop Ultimate Fade In Slideshow v2.0 in manual mode?
    By GrahamO in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-26-2010, 03:29 PM
  4. Replies: 5
    Last Post: 09-30-2006, 07:26 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •