Main Menu

360 panoramic javascript virtual tour - Free
Written by Edvin Eshagh   

You can create 360 degree panramic virtual tour for free and without any required browser plug-ins.

You don't need java, Flash, ActiveX, or any other plug-in to add panaramic virtual tour to your website.  This solution is a cross browser implementation that uses simple CSS and Javascript.  Which means it will work on anyone's computer.   See a demo here... 

 1)  To start with, you need to obtain a set of images and "stich" them together using any photo software at your disposal.  You can try using hugin for free

It is a good idea to use a camera tripod to minimize your stiching efferts, otherwise, you can attempt to do it free hand.
Also, for stiching purpos, it is a good idea to overlap images by about 50% so that the stiching program can do a better job of blending the colors of the two images.  Believe me, I found this out the hard way...
When the pictures do not have enough overlaping, the stiched images are blocky due to color difference, and do not align well; which means they do not blend very well. 

To blend images you need to set some control points between images.  When you start taking several pictures with close to 50% overlapping, you will quickly findout the tedious amount of work ahead of you.  You can use another software to automate this task for you.  When you click align within hugin, it will prompt you for a tool to aid with finding the control points.  I found autoPano to work well.  When hugin (stiching app) prompts me for it when I click on align, I simply point to autopano.exe and let it do its magic for me.

Also, I found that smartblend worked best for me within hugin (above mentioned app).   To set it, I simply select File->Preferences->Use alternative Enblend program, and specify the bath to smartblend.exe for "Enblend:" text box.  It did a better job with blending my images, for both color and image creation.

2)  Next, inside your HTML specify a DIV container with its size attributes to act as a window to the 360 view.  Give this Div layer with the appropriate size attributes (which will correspond to your view port) and a unique id.  For example:

    <div id="myhome" style="height:200px; width:400px"></div>

3)  Next, call our friendly javascript to show the page.  For example:

    <script type="text/javascript">show360Simple( "myhome", "/images/txb5_money.jpg");</script>

There you go.  It's easy, it's free, it's browser and platform independent.  

 Here is the corresponding javascript:

<script type="text/javascript">
 // Author: Edvin Eshagh
 function show360Simple( divContainerId, imageUrl )
{
show360( divContainerId, imageUrl , 200, 20 , 1);
}

 function show360( divContainerId
                         , imageUrl
                         , imageWidthInPixels
                         , moveIntervalInMS
                         , moveSteps )
{
   var o = document.getElementById( divContainerId );
 o.style.backgroundImage = 'url'+'(' + imageUrl + ')';
 o.style.position = "relative";
 o.innerHTML = '<div style="width:20%; height:100%;position:absolute;"'
  +   ' onmouseover="show360Direction(\'' + divContainerId + '\',-2);"></div>'
  + '<div style="width:20%; height:100%;position:absolute;left:20%"'
  +   ' onmouseover="show360Direction(\'' + divContainerId + '\',-1);"></div>'
  + '<div style="width:40%; height:100%;position:absolute;left:40%;"'
  +   ' onmouseover="show360Direction(\'' + divContainerId + '\',0);"></div>'
  + '<div style="width:20%; height:100%;position:absolute;left:60%;"'
  +   ' onmouseover="show360Direction(\'' + divContainerId + '\',1);"></div>'
  + '<div style="width:20%; height:100%;position:absolute;right:0px;"'
  +   ' onmouseover="show360Direction(\'' + divContainerId + '\',2);"></div>';
 show360Direction( divContainerId, 1 );
 setTimeout( "move360( '" + divContainerId  + "', " + moveSteps + ", 0, "
  + imageWidthInPixels + ", " + moveIntervalInMS +" );", moveIntervalInMS );
} // show360()

 function show360Direction( divContainerId, iDirection ) {
 eval( "show360_" + divContainerId + " = " + iDirection ) ;
 }

 function move360( divContainerId
                        , iDirectionStep
                         , deltaX
                         , imageWidth
                         , refreshInterval )
{
  //if( deltaX > imageWidth || deltaX<0) {iDirectionStep *= -1;}
  deltaX += eval( "show360_" + divContainerId ) * iDirectionStep;
  var o = document.getElementById( divContainerId );
  o.style.backgroundPosition = deltaX + "px 0px";
  var evalFunc = "move360( '" + divContainerId + "'"
                                     + ", " + iDirectionStep
                                     + ", " + deltaX
                                     + ", " + imageWidth
                                     + ", " + refreshInterval
                                     + ");";
  setTimeout( evalFunc, refreshInterval );
 } // move360()
</script>