We reccomend flash templates.

Online Virtual Tours

One Click Is Enough To Create An Online Virtual Tour

The Online Virtual Tour Creator supports several image formats and lets you create Virtual Tours from the scratch in just two clicks:

  • A click from your camera to capture 360 degree around in a single exposure.

  • A click from your mouse to transform the picture into an Interactive Virtual Tour.

With your own camera and free.


Parabolic Mirrors

Contact Information

360 Facil

Barcelona, España

Buenos Aires, Argentina

Santiago, Chile

Contact Us

Online : Contact Page

E-Mail : info@360facil.com

Retractable Parabolic Mirror


Find An Answer To Your Enquiry Entering The Forum

This is the place to ask for data you didn't find elsewhere and also a good spot to help others with your knowledge :


Subscribe To Our Newsletter

To be notified of major updates to our site and/or other related info please type in your email adress :



A Minimal Investment To Update Your Online Real Estate Agency

Offer more and better services to your clients by showing your Real Estate Portfolio in 360 degree Virtual Tours. Nothing is more alike to actually being in the place and you can do it yourself with the same ease as you do it with traditional pictures.

The Ideal Complement To Any Website

Every Webmaster can notoriously improve his/her services by adding to them interactive Virtual Tours that he/she can do with his/her own equipment and in as little as two clicks.

The Freeware Programs That Will Do All The Job

Depending on the panorama type, the combination of this four free programs, three, two, one or even none of them is all the multimedi photographer needs to complete his/her work.

New : Use our free Directory to spread the word about your Products and Services of Multimedia Photography.

Interactive JQuery Panorama Publishing

Virtual Tours based on JQuery do not require any plugin installed in the user's device and work even in tablets such a iPads.

Unlike Virtual Tours based on Java and Flash, Virtual Tours based on JQuery depend on a Javascript library which is located at the server or any other location so that the user's computer does not need any previous installation and requires for working nothing more than a browser. JQuery works with all browsers, even in devices of Tablet type such as Apple's iPad.

In spite of these important advantages, the JQuery library for converting panoramas into Virtual Tours offers relatively basic features. The image movement is quite irregular and panoramas scroll from left to right and viceversa but do this in flat mode, without the perpective correction and immersive effect that distinguish mainly those viewers based on Java and Flash. The only controls that it admits are buttons to tell the viewer the scrolling direction, its pause and restart. As a consequence, this system is adequeted for Cylindrical Panoramas as the one below, which we'll use for this demonstration :

The version which we'll present on this page, however, is a modification over the open code of this script created by Arnault Pachot, which adds a certain degree of interactivity to the viewer proper. On this version, besides the normal controls, it is possible to drag laterally the image by clicking on it with the mouse's cursor. This improvement is partial since it doen't work on Tablets, however, on them the panorama viewer works normally with the basic Jquery features.

Nowadays when the computer market is quickly opening to the use of tablets, to create an alternative to the Java and Flash based pages destined to tablet's users is increasingly becoming a necessity and so far JQuery is one of the most adequated of those.

JQuery Panorama Viewer Presentation

The structure of this presentation includes five files which for this example we'll locate togheter in a folder we'll name JQuery :

Click here to download the five files togheter and uncompress the file to an empty folder as shown above. Alternatively you can choose to download each file apart and and save each one with the file name as indicated in the links :






As always, we'll work with two programs opened simultaneously. In a window of our browser we'll have in sight the webpage and in one or several windows of our text editor we'll open the .js and .css files if we want to modify them. Each time we'll make a change to any of these files, after saving the changes we'll reload the webpage on the browser to check out if the changes made to the other files reflect satisfactorily on the page.

The jquery.js file is the Javascript JQuery libray used for applications based on this language, which complements the particular instructions for each application. For its normal use this file should never be edited.

The jquery.panorama.js file is the specifc instruction to create the panorama viewer, in this case, the modification created by Arnaut Pachot. It is usually not recommended to edit most of this file, except for a few lines at the beggining where some values for variables are established :

Meaning Of The Variables

viewport_width indicates in pixels the width if the panorama viewer window. Its default value is 600 pixels.

speed is the rotation speed and its default value is 20000.

direction defines the direction of the initial Virtual Tour's rotation. It admits two values, right or left being the later its default value.

control_display defines the permanence on screen of the Virtual Tour's controls. If the value established is yes the controls remain permanently in sight , while if the established value is auto these only show when the mouse's cursor moves over the area corresponding to them. The default value is auto.

start_position sets a starting position for the image different from the default one at the left end of it. The value is measured in pixels of distance.

auto_start admits two values : true for the panorama to rotate automatically immediately after loading or false for it to load and stay still.

mode_360 also admits two values : true to allow for the image's continuos rotation around the 360 degree or false for the extremes not to meet. The first of these values is the default attribute.

loop_180 can only be used combined with a value of false for the previous parameter. In this case, a value of true for this attribute will make the image automatically scroll from left to right or viceversa and if a value of false is set the image will not move by itself.

For the exampel illustrating this page we'll use the following values :

/* =========================================================
// jquery.panorama.js
// Author: OpenStudio (Arnault PACHOT)
// Mail: apachot@openstudio.fr
// Web: http://www.openstudio.fr
// Copyright (c) 2008 Arnault Pachot
// licence : GPL
========================================================= */
(function($) {
$.fn.panorama = function(options) {
var settings = {
viewport_width: 450,
speed: 20000,
direction: 'left',
control_display: 'yes',
start_position: 0,
auto_start: true,
mode_360: true };

The jquery.panorama.css file is a style's file where the look of the elements that constitute the Virtual Tour are set, such as the dimensions of it, their fonts, colors, etc :

This is another file we must configure to give our Virtual Tour's viewer the look that better suits our needs : on it, element's classes and sub-classes are defined and each one is given the desired values. It is convenient to test by modifiying some of these values and checking out the result of each change on the reloaded webpage at the browser until the appeareance most adequated to each case is found. The contents of this file for the example in this page are as follows :

.panorama-viewport { position: relative;
    width: 100000px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    text-align: left; }
.panorama-container { position: relative;
    width: 100000px;
    margin: 0;
    padding: 0; }
.panorama-control { position: absolute;
    display: none;
    padding: 0;
    margin: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 30px;
    background: black;
    filter: alpha(opacity=50);
    opacity: .5;
    text-align: left; }
.panorama-control-pause { float: left;
    padding: 0;
    margin: 0;
    color: white;
    text-decoration: none;
    font-size: 20px;
    line-height: 30px;
    width: 33%;
    text-align: center;
    font-family: 'Arial',sans-serif }
.panorama-control-pause:hover { text-decoration: none; }
.panorama-control-pause { text-transform: uppercase; }
.panorama-panel { position: absolute;
    display: none;
    top: 0;
    right: 0;
    background: #009cff;
    filter: alpha(opacity=50);
    opacity: .5;
    color: white;
    padding: 4px; }
.panorama-panel h2 { font-size: 11px;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    text-align: right; }
.panorama-panel ul { display: none; }
.panorama { position: relative;
    margin: 0;
    padding: 0;
    border: none; }

The pagina.htm file is the webpage where the Virtual Tour is inserted :

This is the file that contains all the references to the other files. The references to external codes, ie the files with .js and .css formats must be located at the page's header between the <head> and </head> tags, while in the body of the page, between the <body> and </body> tags at the precise location where we want to insert the Virtual Tour we must locate a DIV element surrounded by a pair of <div> and </div> tags adding on the opening tag the identification of the element with a class defined at the style's .css file, in this case the page class.

Within this DIV element we'll positon the panoramic image by using a simple IMG image tag to which however we'll add an attribute defined by another class also defined in the style's sheet, in this case the panorama class. This way we'll get the image not to be shown on its normal falt mode but as a Virtual Tour.

The width defined in the tag corresponds to the real width measured in pixels of the panoramic image used while the height is the height that is defined for the Virtual Tour's window :

<link rel="stylesheet" type="text/css" href="jquery.panorama.css"/>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="jquery.panorama.js"></script>
<div id="page">
<img src="panorama.jpg" class="panorama" width="1040" height="300"/>

The Virtual Tour created looks like this :

For further information about this script head up to Arnault Pachot's page .

Visitor's Feedback

Add A Question Or Comment

All fields are optional. Messages not regarding the subject may be moderated.

Write 123 here (anti-spam check)

Send me a reminder of this publication.

If you like 360 Facil please share it with your social networks

With any camera

360 Degree Interactive Panoramas
In Three Easy Steps

After reading this tutorial you'll be able to create your first 360 degree interactive photography with the camera you already have :

1 - Photograph
1 - Fotografiar

Take one or more pictures of the place you want to show.

2 - Edit
2 - Editar

Convert your pictures into 360 degree panoramas.

3 - Publish
3 - Publicar

Make your panoramas interactive and available to the world on the internet.

Start Tutorial

If a picture is worth a thousand words, a 360 degree interactive panorama is worth a thousand pictures...


Online Virtual Tour Creator

Using the online virtual tour creator you can :

Convert your 360 degree pictures to virtual tours with a single click.

Insert your virtual tours into web sites, emails, blogs or wherever you like by just copying and pasting a text.

Know in a practical way all kinds of 360 degree pictures.

Discover that you can create hundreds of interactive virtual tours just as easily as you take pictures with your camera.

Check that with just one click from your camera and another click from your mouse it is possible to create a 360 degree interactive virtual tour out of nothing. And completely free of charge!!!

You can get started right now, even if you don't have a camera

Create Virtual Tour Now

Find us in Facebook and thank you for your Like.