project page

chrisbateman · Feb 19, 2014 · a6d64c2 · a6d64c2
1 parent b87d531
commit a6d64c2
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 1 deletion.
diff --git a/cubic/back.jpg b/cubic/back.jpg
diff --git a/cubic/bottom.jpg b/cubic/bottom.jpg
diff --git a/cubic/front.jpg b/cubic/front.jpg
diff --git a/cubic/left.jpg b/cubic/left.jpg
diff --git a/cubic/right.jpg b/cubic/right.jpg
diff --git a/cubic/top.jpg b/cubic/top.jpg
diff --git a/index.htm b/index.htm
@@ -0,0 +1,181 @@
+
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Spherical.js</title>
+	<link href='//fonts.googleapis.com/css?family=Raleway:100,300' rel='stylesheet' type='text/css'>
+	<style>
+	html {
+		height: 100%;
+		-webkit-text-size-adjust:none;
+		-webkit-font-smoothing: antialiased;
+		background-color: #EEE;
+		color: #222;
+		font: 100%/1.4 sans-serif;
+	}
+	body {
+		margin: 0;
+	}
+	.container {
+		margin: 0 auto;
+		max-width: 800px;
+		padding: 0 3%;
+	}
+	a {
+		color: #AAA;
+	}
+	.button {
+		display: inline-block;
+		*display: inline; /* IE 7 */
+		line-height: normal;
+		white-space: nowrap;
+		vertical-align: baseline;
+		text-align: center;
+		font-size: 100%;
+		*font-size: 90%; /*IE 6/7 */
+		*overflow: visible; /*IE 6/7 */
+		padding: 0.5em 1.5em 0.5em;
+		color: #EEE;
+		border: 0 none;
+		border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
+		background-color: #555;
+		text-decoration: none;
+		border-radius: 2px;
+	}
+	.button:hover,
+	.button:focus {
+		background-color: #777;
+	}
+
+	header {
+		padding-bottom: 2em;
+		text-align: center;
+	}
+	header h1 {
+		font-family: Raleway;
+		font-weight: 100;
+		font-size: 5em;
+		margin: 0.3em 0;
+	}
+
+	header .info {
+		letter-spacing: -.31em;
+	}
+	header p,
+	header .cta-container {
+		letter-spacing: normal;
+		display: inline-block;
+		width: 50%;
+		vertical-align: middle;
+	}
+	header p {
+		text-align: left;
+	}
+	header .button {
+		margin: 0.5em 1em;
+	}
+
+	h2 {
+		font-family: Raleway;
+		font-size: 1.8em;
+		font-weight: 300;
+	}
+
+	#pano {
+	    width: 540px;
+	    height: 400px;
+	    margin: 0 auto;
+	    max-width: 100%;
+	}
+
+	.info-area {
+	    margin:4em 0;
+	}
+
+	pre {
+		background: #666;
+		color: #EEE;
+		border: 1px solid #222;
+		padding: 1em 1.5em;
+		overflow-x: auto;
+	}
+	footer {
+		margin-top: 3em;
+		padding: 1em 0;
+	}
+
+	@media (max-width: 440px) {
+		header h1 {
+			font-size: 3.5em;
+		}
+		#pano {
+		    height: 300px;
+		}
+	}
+	</style>
+</head>
+<body>
+	<header>
+		<div class="container">
+			<h1>Spherical.js</h1>
+			<div class="info">
+				<p>Display 360x180 panoramas with HTML5.</p>
+				<div class="cta-container">
+					<a class="button" href="spherical.js">Download</a>
+					<a class="button" href="https://github.com/chrisbateman/spherical">GitHub</a>
+				</div>
+			</div>
+		</div>
+	</header>
+
+	<div id="pano"></div>
+
+	<div class="info-area">
+		<div class="container">
+			<h2>Basic Usage</h2>
+			<pre><code>new Spherical({
+    container: 'pano',
+    front: 'images/front.jpg',
+    back: 'images/back.jpg',
+    left: 'images/left.jpg',
+    right: 'images/right.jpg',
+    top: 'images/top.jpg',
+    bottom: 'images/bottom.jpg'
+});</code></pre>
+			<p>For more details, see the <a href="https://github.com/chrisbateman/spherical">API</a> on GitHub.</p>
+		</div>
+	</div>
+
+	<div class="info-area">
+	    <div class="container">
+	        <h2>Notes</h2>
+	        <p>Supported in Chrome, Firefox, and iOS.</p>
+	        <p>This was mainly a personal experiment - there are some other existing alternatives you might be interested in - the amazing <a href="http://threejs.org/examples/#css3d_panorama">three.js</a> and the paid but robust <a href="http://krpano.com/">krpano</a>.</p>
+	    </div>
+	</div>
+
+	<footer>
+		<div class="container">
+			<small>Created by <a href="http://cbateman.com">Chris Bateman</a>.</small>
+		</div>
+	</footer>
+
+
+	<link rel="stylesheet" href="spherical.css" />
+	<script src="https://c9.io/christopherb/touchy/workspace/impetus.js"></script>
+	<script src="spherical.js"></script>
+	<script>
+	var pano = new Spherical({
+		container: '#pano',
+		front: 'cubic/front.jpg',
+		back: 'cubic/back.jpg',
+		left: 'cubic/left.jpg',
+		right: 'cubic/right.jpg',
+		top: 'cubic/top.jpg',
+		bottom: 'cubic/bottom.jpg'
+	});
+	</script>
+</body>
+</html>
diff --git a/spherical.js b/spherical.js
@@ -129,7 +129,7 @@
 				});
 				document.body.addEventListener('gesturechange', _onGestureChange);
 				document.body.addEventListener('gestureend', function(e) {
-					_impetus.unpause();
+					_impetus.resume();
 				});
 			}
 		};