akonradi · May 23, 2016 21:39
diff --git a/reddit_pics.html b/reddit_pics.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <!-- based on http://nirmalpatel.com/redditPicsSaver/redditPicsScreensaver.html -->
 <html>
 <head>
 	<base href="http://www.reddit.com/" target="_blank"/>
 	<title>Reddit Pics Screensaver</title>

 	<style type="text/css">
 	
 		html, body {
 			width: 100%;
 			height: 100%;
 			background-color: #000;
 			margin: 0px;
 			padding: 0px;
 			overflow: hidden;
 		}
 		
 		img#pic {
 			position: absolute;
 			top: 0px;
 			left: 0px;
 			max-width: 100%;
 			max-height: 100%;
 			margin-left: auto;
 			margin-right: auto;
 		}

 		div#caption {
 			position: absolute;
 			left: 0px;
 			bottom: 0px;
 			width: 100%;
 			background-color: #000;
 			color: #FFF;
 			font-size: 2em;
 			font-family: "Helvetica Neue", Arial, sans-serif;
 			filter: alpha(opacity=75);
 			opacity: 0.75;
 			text-align: center;
 		}
 		
 		div#innerCap {
 			margin: 1em;
 		}
 		
 		div#dimmer {
 			position: absolute;
 			top: 0px;
 			left: 0px;
 			width: 100%;
 			height: 100%;
 			background-color: #000;
 		}
 	
 	</style>
 	
 	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 	<script type="text/javascript">
 		var getUrlParameter = function getUrlParameter(sParam) {
 			var sPageURL = decodeURIComponent(window.location.search.substring(1)),
 				sURLVariables = sPageURL.split('&'),
 				sParameterName,
 				i;

 			for (i = 0; i < sURLVariables.length; i++) {
 				sParameterName = sURLVariables[i].split('=');

 				if (sParameterName[0] === sParam) {
 					return sParameterName[1] === undefined ? true : sParameterName[1];
 				}
 			}
 		};
 		var showNextPicInterval = undefined;
 		
 		function shuffleAfter(array, startIndex) {
 			var a = array.slice(startIndex);
 			shuffle(a);
 			array.length = startIndex;
 			Array.prototype.push.apply(array, a);
 		}
 		
 		function shuffle(array) {
 		  var currentIndex = array.length, temporaryValue, randomIndex ;

 		  // While there remain elements to shuffle...
 		  while (0 !== currentIndex) {

 		    // Pick a remaining element...
 		    randomIndex = Math.floor(Math.random() * currentIndex);
 		    currentIndex -= 1;

 		    // And swap it with the current element.
 		    temporaryValue = array[currentIndex];
 		    array[currentIndex] = array[randomIndex];
 		    array[randomIndex] = temporaryValue;
 		  }

 		  return array;
 		}
 			
 		function decodeEntities(encodedString) {
 			var textArea = document.createElement('textarea');
 			textArea.innerHTML = encodedString;
 			return textArea.value;
 		}

 		$(document).ready(function() {
 			var subreddit = getUrlParameter("subreddit");
 			if (subreddit == undefined) {
 				// default to cat pics
 				subreddit = "catpictures+catpics+kittens"
 			}
 			console.log("Fetching pics for /r/" + subreddit);
 			var URL = "https://www.reddit.com/r/" + subreddit + "/.json?jsonp=jsonP";
 			var TIME_BETWEEN_PICS = 8 * 1000; // 8 seconds

 			var picsToCycle = new Array();
 			var showingPic = -1;

 			function preloadPics(data) {
 				var pics = data.data.children;
 				for (i=0; i < pics.length; i++) {
 					var info = pics[i].data;
 					var picUrl = decodeEntities(info.url);
 					if (picUrl.match(/imgur.com\/[A-Za-z0-9]{6,10}$/)) {
 						picUrl += ".jpg"
 					}
 					if (picUrl == undefined || picUrl == null) {
 						continue;
 					}

 					var picTitle = info.title;
 					if (picTitle.toLowerCase().indexOf("nsfw") < 0) {
 						var img = $("<img>").data("info", info).load(function() {
 							picsToCycle.push($(this));
 							shuffleAfter(picsToCycle, showingPic + 1);
 							if (showNextPicInterval == undefined) {
 								showNextPicInterval = setInterval(showNextPic, TIME_BETWEEN_PICS);
 								showNextPic();
 							};
 						}).attr("src", picUrl);
 						$("#preload").append(img);
 					}
 				}
 			}


 			function reloadFrontPage() {
 				function loadPagePics(fn, count) {
 					return function(data) {
 						var after = data.data.after;
 						preloadPics(data);
 						var required = count - data.data.children.length;
 						if (required > 0) {
 							$.ajax({
 								async: false,
    							jsonpCallback: 'jsonP',
 							    contentType: "application/json",
 							    dataType: 'jsonp',
 								type: "GET",
 								url: URL + "&after=" + after,
 								success: fn(fn, required)
 							});
 						}
 					}
 				}
 				$.ajax({
 					async: false,
 					jsonpCallback: 'jsonP',
 				    contentType: "application/json",
 				    dataType: 'jsonp',
 					type: "GET",
 					url: URL,
 					success: function(data) {
 						loadPagePics(loadPagePics, 200)(data)
 					}
 				});
 			}

 			function showNextPic() {
 				// center image
 				if (picsToCycle.length != 0) {
 					$("div#dimmer").fadeIn('slow', function() {
 						//alert("Showing next pic: " + showingPic + " of " + picsToCycle.length);
 						showingPic = (showingPic + 1) % picsToCycle.length;
 						var pic = picsToCycle[showingPic];
 						var info = pic.data("info");
 						nextUrl = pic.attr("src");
 						nextCap = decodeEntities(info.title);
 						// fade in dimmer
 						$("img#pic").attr("src", nextUrl);
 						$("div#innerCap").text(nextCap);
 						$("img#pic").css("top", ($("body").height() - $("img#pic").height()) / 2);
 						$("img#pic").css("left", ($("body").width() - $("img#pic").width()) / 2);
 						$("div#dimmer").fadeOut('slow');
 					});
 				}
 			}
 			reloadFrontPage();
 		});
 </script> 
 
 
 </head> 
 
 <body> 
 <img src="" id="pic"/>
 <div id="caption">
 	<div id="innerCap">&nbsp;</div>
 </div>
 <div id="preload" style="display:none;"></div>
 <div id="dimmer">&nbsp;</div>
 <!-- <div id="console" style="z-index: 100; color: black; background-color: white; position:absolute">Console</div>-->
 </body> 
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<!-- based on http://nirmalpatel.com/redditPicsSaver/redditPicsScreensaver.html -->
	<html>
	<head>
	<base href="http://www.reddit.com/" target="_blank"/>
	<title>Reddit Pics Screensaver</title>

	<style type="text/css">

	html, body {
	width: 100%;
	height: 100%;
	background-color: #000;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	}

	img#pic {
	position: absolute;
	top: 0px;
	left: 0px;
	max-width: 100%;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
	}

	div#caption {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	background-color: #000;
	color: #FFF;
	font-size: 2em;
	font-family: "Helvetica Neue", Arial, sans-serif;
	filter: alpha(opacity=75);
	opacity: 0.75;
	text-align: center;
	}

	div#innerCap {
	margin: 1em;
	}

	div#dimmer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #000;
	}

	</style>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script type="text/javascript">
	var getUrlParameter = function getUrlParameter(sParam) {
	var sPageURL = decodeURIComponent(window.location.search.substring(1)),
	sURLVariables = sPageURL.split('&'),
	sParameterName,
	i;

	for (i = 0; i < sURLVariables.length; i++) {
	sParameterName = sURLVariables[i].split('=');

	if (sParameterName[0] === sParam) {
	return sParameterName[1] === undefined ? true : sParameterName[1];
	}
	}
	};
	var showNextPicInterval = undefined;

	function shuffleAfter(array, startIndex) {
	var a = array.slice(startIndex);
	shuffle(a);
	array.length = startIndex;
	Array.prototype.push.apply(array, a);
	}

	function shuffle(array) {
	var currentIndex = array.length, temporaryValue, randomIndex ;

	// While there remain elements to shuffle...
	while (0 !== currentIndex) {

	// Pick a remaining element...
	randomIndex = Math.floor(Math.random() * currentIndex);
	currentIndex -= 1;

	// And swap it with the current element.
	temporaryValue = array[currentIndex];
	array[currentIndex] = array[randomIndex];
	array[randomIndex] = temporaryValue;
	}

	return array;
	}

	function decodeEntities(encodedString) {
	var textArea = document.createElement('textarea');
	textArea.innerHTML = encodedString;
	return textArea.value;
	}

	$(document).ready(function() {
	var subreddit = getUrlParameter("subreddit");
	if (subreddit == undefined) {
	// default to cat pics
	subreddit = "catpictures+catpics+kittens"
	}
	console.log("Fetching pics for /r/" + subreddit);
	var URL = "https://www.reddit.com/r/" + subreddit + "/.json?jsonp=jsonP";
	var TIME_BETWEEN_PICS = 8 * 1000; // 8 seconds

	var picsToCycle = new Array();
	var showingPic = -1;

	function preloadPics(data) {
	var pics = data.data.children;
	for (i=0; i < pics.length; i++) {
	var info = pics[i].data;
	var picUrl = decodeEntities(info.url);
	if (picUrl.match(/imgur.com\/[A-Za-z0-9]{6,10}$/)) {
	picUrl += ".jpg"
	}
	if (picUrl == undefined \|\| picUrl == null) {
	continue;
	}

	var picTitle = info.title;
	if (picTitle.toLowerCase().indexOf("nsfw") < 0) {
	var img = $("<img>").data("info", info).load(function() {
	picsToCycle.push($(this));
	shuffleAfter(picsToCycle, showingPic + 1);
	if (showNextPicInterval == undefined) {
	showNextPicInterval = setInterval(showNextPic, TIME_BETWEEN_PICS);
	showNextPic();
	};
	}).attr("src", picUrl);
	$("#preload").append(img);
	}
	}
	}


	function reloadFrontPage() {
	function loadPagePics(fn, count) {
	return function(data) {
	var after = data.data.after;
	preloadPics(data);
	var required = count - data.data.children.length;
	if (required > 0) {
	$.ajax({
	async: false,
	jsonpCallback: 'jsonP',
	contentType: "application/json",
	dataType: 'jsonp',
	type: "GET",
	url: URL + "&after=" + after,
	success: fn(fn, required)
	});
	}
	}
	}
	$.ajax({
	async: false,
	jsonpCallback: 'jsonP',
	contentType: "application/json",
	dataType: 'jsonp',
	type: "GET",
	url: URL,
	success: function(data) {
	loadPagePics(loadPagePics, 200)(data)
	}
	});
	}

	function showNextPic() {
	// center image
	if (picsToCycle.length != 0) {
	$("div#dimmer").fadeIn('slow', function() {
	//alert("Showing next pic: " + showingPic + " of " + picsToCycle.length);
	showingPic = (showingPic + 1) % picsToCycle.length;
	var pic = picsToCycle[showingPic];
	var info = pic.data("info");
	nextUrl = pic.attr("src");
	nextCap = decodeEntities(info.title);
	// fade in dimmer
	$("img#pic").attr("src", nextUrl);
	$("div#innerCap").text(nextCap);
	$("img#pic").css("top", ($("body").height() - $("img#pic").height()) / 2);
	$("img#pic").css("left", ($("body").width() - $("img#pic").width()) / 2);
	$("div#dimmer").fadeOut('slow');
	});
	}
	}
	reloadFrontPage();
	});
	</script>


	</head>

	<body>
	<img src="" id="pic"/>
	<div id="caption">
	<div id="innerCap"> </div>
	</div>
	<div id="preload" style="display:none;"></div>
	<div id="dimmer"> </div>
	<!-- <div id="console" style="z-index: 100; color: black; background-color: white; position:absolute">Console</div>-->
	</body>
	</html>