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

<div id=”myVr”><canvas id=”myCanvas” width=”800″ height=”200″></div>
<img src=”/vr360/3.jpg” style=”display:none” /> <!– preloads the image with no fuss->

Javascript code

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<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

Send us a message

Please indicate your name.
Please indicate a valid email address.