New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/pano-display-a-360-degree-panoramic-image/
Pano - Display a 360 degree panoramic image
Download Demo
Pano is a jQuery plugin to display a 360 degree panoramic image
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">«</a> <a href="#" class="right">»</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).