EFKhoury ;)

In this article I will show you how to create a web-based virtual tour for free using panoramas created on Dermandar. We will have a series of panoramas linked together using simple javascript code.

This is an example of what we will create:

As you can see, I took several panoramas when I was visiting this place and uploaded them to Dermandar. Now each time you click on a green circle, the corresponding panorama is loaded in the flash viewer. That is a basic virtual tour, done in minutes and best of all, for free!

I will explain now each step of the procedure:

1. Take pictures
2. Take more pictures
3. Create and Upload the panoramas to Dermandar
4. Create the map
5. Write the code
6. Brag about it

In a hurry? Jump to the code.

Take pictures
Ok, that's no secret since we're creating a panorama... You can either make a 360° panorama: you make a full turn when taking the pictures, or a partial panorama in cases where you don't want what's behind you to appear.
The trick here is how to take the pictures. If you're new at this, you might want to take a look at the how-to section on Dermandar's website. I'll try and cover the basics in few words:

• Do not move the camera away from it's axis, in plain English: when you are taking the pictures you should turn around the camera and not turn the camera around you
• The images must overlap: make sure that at least 10% (at most 50%) of the first image is present in the second image
• Make sure that you don't tilt the camera and keep it's height from the ground constant for all the pictures
• Watch out from moving objects on the edges of the photos

Take more pictures
It's not a virtual tour if you have only one panorama! So go ahead unleash the photographer beast inside of you and shoot some more!

Create and Upload the panoramas to Dermandar
Alright, we have the photos so it's time to create our panoramas on Dermandar.
At the time of writing, Dermandar only allows users to upload panoramas through it's Facebook app which can be found here. If you haven't done so already, add the app. (here's a screenshot of it)

You do not need to resize your photos, they will be automatically resized before uploading. Now go to the top menu bar, click on create. A flash movie will load, browse for your photos and select them (one panorama at a time, do not select all the photos you took earlier), few seconds later your photos are stitched together and you can navigate in your panorama. If everything is ok hit the upload button give your panorama a name, set the privacy to public and upload it.

Repeat this for every panorama you shot.

Create the map
Now that our panoramas are created and uploaded, we need a way to navigate between them, to jump from one to another. Something similar to this:

I went to Google Maps and took a screenshot of the location I want. Now if you are making a virtual tour of a house or any other location that can't be seen on Google Maps, you can create the map yourself by drawing a basic sketch of the scene. Example:

Using GIMP (or Paint.NET or even MsPaint) add circles around the places you shot. We'll use these as the links to each panorama.
Creating the HTML image map is very easy, here's the code that I used:

    <img src="201002201730_harissamap.jpg"
        alt="map" usemap="#planemap" />
    <map name="planemap" id="planemap1" style="display: none;">
        <area shape="circle" coords="50,100,5" href="" title="pos1" alt="pos1" />
        ...
    </map>

Set the usemap attribute of the img tag equal to the name attribute of the map tag. As for creating the links use the area tag, set it's shape to circle and for the coords the first two numbers are the X and Y coordinates in pixels, the third number is the radius of the circles we added to our image earlier.
The number of area tags must be equal to the number of panoramas you have in your virtual tour, so add as much as you need.
For more info on the map tag, visit this W3Schools link.

Write the code
This is the fun part, I'm going to show how to embed the Dermandar flash viewer and change the panoramas using javascript.
The recommended way to embed a swf object is by using the javascript SWFObject library, grab a copy from here. This is what the embed code would look like:

    <script type="text/javascript" src="swfobject.js"></script>
    <div id='dermandarViewer'></div>
    <script type='text/javascript'>
        swfobject.embedSWF("http://www.dermandar.com/ViewerD.swf", "dermandarViewer", 
                "450", "270", "10.0.42", "fl/expressInstall.swf", {pano: ""}, 
                {allowFullScreen: "true",allowScriptAccess: "always"}, {});
    </script>

The allowScriptAccess must be set to always.

Now we need to tell the viewer which panorama to load, for that we need to get the panorama id that Dermandar creates when uploading. Go to "My Panoramas" section in the Dermandar FB app, there under the preview picture of your panoramas you can find a link that looks like http://www.dermandar.com/pview.php?pano=THE_ID_WE_WANT.

If you can't find the link it means you didn't set the panorama settings to public. So edit it, set it to public and refresh the page.

In order to load a panorama into the viewer, we call this javascript code:

    document.getElementById("dermandarViewer").changePano("THE_ID_WE_GOT");

"dermandarViewer" is the id of the HTML DIV element that we used in the embed code above.

An optional but nice feature is the panorama preview image that we can get from Dermandar using the following:

    <img src="http://www.dermandar.com/getimage.php?epid=THE_ID_WE_GOT&equi=1" 
        alt="my pano preview" />

Remember the image map we created earlier? That's where we will put the javascript code to change the panoramas, precisely in the href attribute of the area tag:

    <area shape="circle" coords="50,100,5"
        href="javascript:document.getElementById("dermandarViewer").changePano("ID_1");"
        title="pos1" alt="pos1" />
    <area shape="circle" coords="95,80,5"
        href="javascript:document.getElementById("dermandarViewer").changePano("ID_2");"
        title="pos2" alt="pos2" />

To sum things up, this is a complete code sample, the one used in the virtual tour at the top of this page:

    <style type="text/css">
        .vt {
            background-color: #336699;
            border: thin solid black;
            width: 650px;
            height: 270px;
            margin: 0px auto;
        }
        .viewer,.map {
            float: left;
        }
        .desc {
            width: 190px;
            float: left;
            padding-left: 5px;
            color: #ffffff;
            font-size: 14px;
        }
        .equi img {
            width: 650px;
            height: 120px;
        }
        .center {
            width: 700px;
            margin: 0px auto;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
    //<![CDATA[
        function loadPano(panoid)
        {
            document.getElementById('dermandarViewer').changePano(panoid);
            document.getElementById('equi').src = "";
            document.getElementById('equi').src = 
                "http://www.dermandar.com/getimage.php?epid="+panoid+"&equi=1";
        }
    //]]>
    </script>
    <div class="center">
    <div class="equi"><img id="equi" src="" alt="" /></div>
    <div class="vt">
        <div id="cancelscroll" class="viewer">
            <div id='dermandarViewer'></div>
        </div>
        <div class="map"><img
            src="201002201730_harissamap.jpg"
            alt="map" usemap="#planemap" style="border: none;" /> <map
            name="planemap" id="" style="display: none;">
            <area shape="circle" coords="50,100,5"
                href="javascript:loadPano('aad2150ae0843d4a985e9f4d32a54c4fcfdeac9f');"
                title="pos1" alt="pos1" />
            <area shape="circle" coords="95,80,5"
                href="javascript:loadPano('77b0f374231aa68bb3a338371a8447bf072eedc3');"
                title="pos2" alt="pos2" />
            <area shape="circle" coords="100,95,5"
                href="javascript:loadPano('ceb405fb7a7bad05cf045e36c6180bc1b457eb55');"
                title="pos3" alt="pos3" />
            <area shape="circle" coords="136,57,5"
                href="javascript:loadPano('582efbb01eba5fc653381be4ad1aa2d86f823d27');"
                title="pos4" alt="pos4" />
        </map></div>
        <div class="desc"><span>Click on the green circles on the image above to
        change the panorama.</span></div>
    </div>
    </div>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript" src="scrollfix.js"></script>
    <script type='text/javascript'>
        swfobject.embedSWF("http://www.dermandar.com/ViewerD.swf", "dermandarViewer", 
                "450", "270", "10.0.42", "fl/expressInstall.swf", {pano: ""}, 
                {allowFullScreen: "true",allowScriptAccess: "always"}, {});
        hookEvent('cancelscroll', 'mousewheel', cancelEvent);
    </script>

You can tweek the CSS as much as you want, changing the layout of the viewer/map...
Two things I didn't mention in this article are the scrollfix.js and the hookEvent(...) function call. These are used to prevent the browser from scrolling when you zoom the panorama inside the flash viewer using the mouse wheel. They are outside the scope of this document but if you want to use them, I have attached the javascript file to this document.

Brag about it
That's it, we've created a virtual tour without needing any commercial product or taking anyone's permission. So go ahead make one and brag about it :-)

Thanks for reading, if you like this article or find it useful please leave a comment and/or share it with your friends.