gifs/index.html at master · j4n/gifs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
			/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

			html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
			blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
			em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
			b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
			table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
			details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
			output, ruby, section, summary, time, mark, audio, video {
				margin: 0;
				padding: 0;
				border: 0;
				font-size: 100%;
				font: inherit;
				vertical-align: baseline;
			}
			/* HTML5 display-role reset for older browsers */
			article, aside, details, figcaption, figure,
			footer, header, hgroup, menu, nav, section {
				display: block;
			}
			body {
				line-height: 1;
			}
			ol, ul {
				list-style: none;
			}
			blockquote, q {
				quotes: none;
			}
			blockquote:before, blockquote:after,
			q:before, q:after {
				content: '';
				content: none;
			}
			table {
				border-collapse: collapse;
				border-spacing: 0;
			}

			#myDiv {
				height:100%;
				width:100%;
				margin-left: auto;
				margin-right: auto;
				display: block;
			}
			#cropcontainer {
				width:  auto;
				height: 100%;
				margin-left: auto;
				margin-right: auto;
				display: block;
			}
		</style>

		<script type="text/javascript" language="javascript">

			var gifs = [];
			var	index = 0;

			// http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
			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 fetchGifs() {
				var oRequest = new XMLHttpRequest();
				var sURL = "gifs.json";
				oRequest.open("GET",sURL,false);
				oRequest.send(null)

				if (oRequest.status==200) {
					var response = oRequest.responseText;
					var parsed = eval("(function(){return " + response + ";})()");
					return shuffle(parsed.gifs);
				} else alert("Error executing XMLHttpRequest call!");
			}

			function getGif() {
				//index=Math.floor(Math.random()*(gifs.length-1));
				if (index == gifs.length) {
					gifs = fetchGifs();
					index = 0;
				}
				return gifs[index++];
			}

			function getImageUrl(img) {
				setTimeout(function() {
					img.src = getGif();
					var i = new Image();
					i.src = gifs[index];
				},3000);
			}

			window.onload=function(){
					gifs = fetchGifs();
				};
		</script>
		<title>ALL the gifs!</title>
	</head>
	<body bgcolor="#000000">
		<div id='myDiv'>
		<img src="tgif.gif" id='cropcontainer' onload="getImageUrl(this)" />
		</div>
	</body>
</html>