360 degree image viewing

360-degree-image-viewing.markdown

360 degree image viewing

Using NPM kaleidoscope package to view 360 degree images and videos. This picture is one I took using my #Giroptic IO camera on 6th of May in Aarhus, Denmark.

A Pen by Sten Hougaard on CodePen.

License.

index.html

   <div id="container360"></div>
<div class="info">
	<h1>NPM kaleidoscope package</h1>
	<a href="https://github.com/thiagopnts/kaleidoscope" target="_blank">kaleidoscope</a>
</div>

<h1 id="info"><a href="http://www.aarhus2017.dk/en/">City of #Aarhus</a></h1>

script.js

(function() {
    var viewer = new Kaleidoscope.Image({
        source: 'https://dl.dropboxusercontent.com/u/3260327/cdn/Fil%2009-05-2017%2011.09.12.jpeg',
        containerId: '#container360',
        height: window.innerHeight,
        width: window.innerWidth,
    });
    viewer.render();

    window.onresize = function() {
        viewer.setSize({height: window.innerHeight, width: window.innerWidth});
    };
})();

scripts

<script src="https://cdn.rawgit.com/thiagopnts/kaleidoscope/master/dist/kaleidoscope.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);

html, body, #container360 {
font-family: 'Inconsolata', monospace ;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.info {
	pointer-events: none;
	user-select: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-shadow: 0 0 7px black;
	height: 4.5em;
	color: white;
	position: absolute;
	bottom: 0;
	background: hsla(120,100%,100%,.1);
	box-sizing: border-box;
	padding: .5em;
}

a {
	color: white;
	pointer-events: all;
	transition: all .4s;
}

h1 {
	margin: 0;
	padding: 0;
}

#info {
	position: absolute;
	top: .5em;
	left: .5em;
}
#info a {
	text-decoration: none;
	color: hsla(120,100%,100%,.7);	
}

#info a:hover, .info a:hover {
	color: yellow;
}