Online Virtual Tours
Using panoramic images and slideshows

Introduction

Charabanc is a javascript program you can use on your website to take people on an online virtual tour of a place. The way it works is that you take panoramic photographs at a series of viewpoints around the site, which are displayed one at a time in a viewport on the page. You can scroll the image in the viewport so it looks as if you are looking around in a full circle.

The images can have hotspots defined, which are active areas that do something when you click on them. There are two kinds of hotspots: path hotspots and info hotspots.

Path hotspots are used for moving from one viewpoint to a neighbouring one. When you click on one it will move you to the viewpoint that the path you have clicked on leads to. While you are moving to the new viewpoint, a slideshow is displayed which makes it look like you are walking along the path.

You can also move to a new viewpoint using a scrollable, zoomable map. Each viewpoint is shown as a small yellow circle on the map, with the one you are currently at shown in red. When you click on a circle, the tour moves to that viewpoint.

Link hotspots bring up a page that tells you more about an object in the picture.

It's easier to see for yourself rather than for me to try to explain it any further, so there is a demo here.

Technical details

Charabanc is written in javascript, an interpreted programming language which runs inside your web browser to allow dynamic effects on web pages. It uses an open source javascript toolkit called dojo to do a lot of the hard work such as making the code cross-browser compatible. It runs entirely client-side, with the only connection to the webserver being plain http requests, so you don't need any special programs (e.g. PHP) installed on your web server to use it. You configure it using an xml file which is loaded from the server when the program is initialising. This defines the names of all the viewpoints, the links between them, their location on the map, and so on.

The pictures for the demo, which is from the Middlewood Trust website, were taken on an ordinary digital camera and then stitched together to make panoramas using an open source program called hugin. The charabanc installation files include a few perl scripts which help automate the process of converting the images for the panoramas and slideshows into the right sizes to work with charabanc.

For more details, see the full documentation in html or pdf.

License

Charabanc is free software (also called 'open source software'). What this means is that you are welcome to use the code free of charge for your own website, or for a website you are building for someone else, and to modify it to suit your own needs, provided that you abide by certain conditions that are designed to prevent you from taking these rights away from others. The main condition is that you let people using your website know that charabanc is free software, and give them a way of downloading it. The easiest way to do this is to keep the 'powered by charabanc' link in virtual-tour.html. The code is formally licensed under the GNU Affero General Public License, whose terms are set out in full here.

Development

If anyone wants to help with the coding of Charabanc, you are very welcome. Just contact me at the address below if you have any patches you want to submit or want any ideas for things that need doing. Bug reports should also be sent to the address below.

Support and services

If you are happy to do the work of taking the photographs and setting up Charabanc yourself, and just want a bit of help clarifying the documentation or fixing small problems, please feel free to contact me at the address below. If on the other hand you would like to have a Charabanc tour set up on your website but don't have the time to do it yourself, I may be able to help on a paid basis.

Contact

The original (and currently only) author of Charabanc is Andy Baxter. I am always interested to hear what people are doing with charabanc, so if you have set it up on your site, it would be good to hear from you. If a few people do this, I'll create an index page on this site of other sites that have virtual tours using this software. You can contact me at the following email address: andy at earthsong dot free-online dot co dot uk.