360 VR Panorama jQuery widget
360° panorama images are great for displaying interactive “walk throughs”, virtual tours of hotels, offices, parks and many other uses.
We’ve made this jQuery widget so that you can easily add 360° panorama photos to your own site. It uses a HTML5 canvas to display and the rotating image and minified javascript file is very small.
jQuery Widget features
Simple & lightweight javascript file (1.93 kb)
Easy HTML markup
Customization
Optional settings
Multiple instances are supported
Full screen background mode
More options coming soon
HTML code
<img src=”/vr360/3.jpg” style=”display:none” /> <!– preloads the image with no fuss->
Javascript code
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript” src=”js/jquery.ui.vr360.min.js"></script>
<script>
$(function () {
$( “#myVr” ).vr360( {imageSrc:’7.jpg’, canvasID:”myCanvas”, steps:30, direction:-1, interaction:true} );
});
</script>
Required parameters
imageSrc: // the image file name which will be displayed
canvasID: // the canvas id which is used to display the panorama
Options you can customize
direction: // initial direction of rotation, default 0=none, 1=right, -1=left
steps: // the number of vertical divisions used to calculate the rotation speed, default steps=20
interaction: // capture user mouse movement and rotate the vr accordingly, default true, false
fullscreen: // display the image full screen on a background, default false=no, true=yes
fitHeight: //force the image height to match the canvas height, default false=no, true=yes
More examples
Latest demo version displaying 3 image instances using jquery.ui.vr360.min.js
A full screen version with the photo filling the screen and rotation controlled by the mouse
TODO
Add multiple clickable zones which link to other images or pages
Better “elastic” scrolling rate
Vertical tilt
Zoom
Responsive canvas size