Pano - Display a 360 degree panoramic image

Pano is a jQuery plugin to display a 360 degree panoramic image

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE JS FILES

<script src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="jquery.pano.js"></script>

2. HTML

<div id="myPano" class="pano">
	<div class="controls">
		<a href="#" class="left">&laquo;</a>
		<a href="#" class="right">&raquo;</a>
	</div>
</div>

3. JAVASCRIPT

$(document).ready(function(){
	$("#myPano").pano({
		img: "./sphere.jpg"
	});
});

4. OPTIONS

.pano {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	cursor: move;
}
.pano .controls {
	position: relative;
	top: 40%;
}
.pano .controls a {
	position: absolute;
	display: inline-block;
	text-decoration: none;
	color: #eee;
	font-size: 3em;
	width: 20px;
	height: 20px;
}
.pano .controls a.left {
	left: 10px;
}
.pano .controls a.right {
	right: 10px;
}
.pano.moving .controls a {
	opacity: 0.4;
	color: #eee;
}

5. OPTIONS

img - The URL to the background image. This should be a 360 degree panoramic image. You should set the CSS so that the width and height of the containing block are your desired size.

It will add a class of .moving whenever the background image is being moved (whether drag & drop or via the controls).