Vr360 panorama photos

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 mimified javascript file is very small.

jQuery Widget features

Simple & lightweight javascript file (1.93 kb)
Easy HTML markup
Customization
Optional settings
Mulitple 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=”http://code.jquery.com/jquery-1.9.1.js”></script>
<script src=”http://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, falase
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

Here is the 360VR widget in action displaying a small landscape photo

Latest demo version displaying 3 image instances using jquery.ui.vr360.min.js

A full screen version with the photo filling the screen and rotating in both directions

 

TODO

Add multiple clickable zones which link to other images or pages
Better “elastic” scrolling rate
Vertical tilt
Zoom
Responsive  canvas size

WordPress plugin version

Useful links

360 degreeimages

We love coding and colours