iPanorama 360° - jQuery Virtual Tour

iPanorama 360° is a lightweight and rich-feature panorama viewer for the web. This plugin is built with modern libraries jQuery and Three.js to be used for part of backend solutions. Additionally, it has an awesome feature called virtual tour which allowed the user to navigate from one scene to another. Also, it supports hotspots for providing information about any part of the scene or for creating interactive tours. It uses their own tooltip system, you can enrich it with text, images, video and other online media. Use this plugin to create interactive tours, maps and presentations. The plugin can be deployed easily. It runs on all modern browsers and mobile devices like iOS, Android and Windows.

I'm using the Three.js library. It's a free and fast 3D engine for making WebGL worlds.

The plugin's folder contains:

• demo - folder with an example of use
  • assets - folder with additional files
  • index.html - html file with demo
• src - folder with a javascript source file (full and min version)
  • less - LESS files
  • ipanorama.css - core and default theme for the panorama
  • ipanorama.theme.default.css - default theme for the panorama
  • ipanorama.theme.modern.css - modern theme for the panorama
  • ipanorama.theme.dark.css - dark theme for the panorama
  • jquery.ipanorama.js - main source file
  • jquery.ipanorama.min.js - compressed and obfuscated main source file

1. Load jQuery.js, Three.js and jquery.ipanorama.min.js in the head section for your html document

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/jquery.ipanorama.min.js"></script>

2. Load the CSS theme file that styles the plugin

<script type="text/css" src="css/ipanorama.css" rel="stylesheet" media="all"></script>
<script type="text/css" src="css/ipanorama.theme.default.css" rel="stylesheet" media="all"></script>

3. Create a DIV tag where to set the panorama:

<div id="panorama"></div>

4. Finally just call the plugin on the div ID or class

4.1 Simple example

$("#panorama").ipanorama();

4.2 Advanced example with two different type of scenes and virtual tour support

$("#panorama").ipanorama({
	sceneId: "main",
	scenes: {
		main: {
			type: "cube",
			image: {
				left: "assets/images/left.png",
				right: "assets/images/right.png",
				top: "assets/images/top.png",
				bottom: "assets/images/bottom.png",
				front: "assets/images/front.png",
				back: "assets/images/back.png",
			},
			hotSpots: [
				{
					pitch: 0,
					yaw: 0,
					sceneId: "second",
				},
			],
		},
		second: {
			type: "sphere",
			image: "assets/images/sphere.jpg",
			hotSpots: [
				{
					pitch: 0,
					yaw: 0,
					sceneId: "main",
				}
			],
		}
	},
});

iPanorama 360 Virtual Tour Builder is an editing web tool that allows you to quickly and easily make a config for the plugin. What you see is what you get! This builder is intuitive and a pleasure to use. It allows you to save custom configs and use it in the future. Please read below for information on how to use our builder.

Installation

Uploading the builder via FTP to your web server

1. Download the zipped plugin pack to your local computer from CodeCanyon and extract the ZIP file contents to a folder on your local computer
2. In the extracted folder you will find the folder 'builder'
3. Use a FTP client to access your host web server
4. Upload the builder folder 'builder' to your host web server (root directory or subdirectory)
5. Type in the browser http://yousite.com/subdirectory/builder (depends on the last step)
6. Check the working of the builder

This is the description of a manual setup, but you can use the online builder for this task too.

1. Call the plugin on the div ID or class with the parameter "hotSpotSetup: true":

$("#panorama").ipanorama({hotSpotSetup: true});

2. Press a control key (marked "Ctrl") and click the left mouse button where you want.

3. Look into the browser's console. You should see an information line like below.

yaw: 27.4483248729099, pitch: 0.36013708227241986, camera yaw: 0, camera pitch: 0, camera zoom: 75

This is the description of a manual setup, but you can use the online builder for this task too.

1. Prepare panoramic photos for your scenes. For example, I make two scenes with photos below.

   

2. Load jQuery.js, Three.js and jquery.ipanorama.min.js in the head section for your html document

   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/three.js"></script>
   <script type="text/javascript" src="js/jquery.ipanorama.min.js"></script>
   

3. Load the CSS theme file that styles the plugin

   <script type="text/css" src="css/ipanorama.css" rel="stylesheet" media="all"></script>
   <script type="text/css" src="css/ipanorama.theme.default.css" rel="stylesheet" media="all"></script>
   

4. Create a DIV tag where to set the panorama:

   <div id="myvirtualtour"></div>
   

5. Call the plugin to setup your scenes with hotSpotSetup = true

   $("#myvirtualtour").ipanorama({
   	theme: "ipnrm-theme-modern",
   	hotSpotSetup: true,
   	sceneId: "entrance",
   	scenes: {
   		entrance: {
   			type: "sphere", // specifies the scene type ("box", "sphere", "cylinder")
   			image: "assets/images/entrance.jpg",
   			title: "The entrance to the house"
   		},
   		livingroom: {
   			type: "sphere", // specifies the scene type ("box", "sphere", "cylinder")
   			image: "assets/images/livingroom.jpg",
   			title: "The Living Room"
   		}
   	}
   });
   

6. Let's setup hotspots. Press ctrl and click anythere your want in the first scene.

   

   If you check your browser console, you will see coordinates for your hotspot (yaw and pitch)

   

7. Let's rewrite our panorama config with hotspots support

   $("#myvirtualtour").ipanorama({
   	theme: "ipnrm-theme-modern",
   	hotSpotSetup: true,
   	sceneId: "entrance",
   	scenes: {
   		entrance: {
   			type: "sphere", // specifies the scene type ("box", "sphere", "cylinder")
   			image: "assets/images/entrance.jpg",
   			title: "The entrance to the house",
   			hotSpots: [{
   				yaw: 190.86405695726037, 
   				pitch: 4.8227115073584,
   				sceneId: "livingroom",
   				popoverContent: "The Living Room"
   			}]
   		},
   		livingroom: {
   			type: "sphere", // specifies the scene type ("box", "sphere", "cylinder")
   			image: "assets/images/livingroom.jpg",
   			title: "The Living Room",
   			hotSpots: [{
   				yaw: 120.81267038066335,
   				pitch: 4.153851619425508,
   				sceneId: "entrance",
   				popoverContent: "The entrance to the house"
   			}]
   		}
   	}
   });
   

8. Repeat steps above, you can build your own virtual tour

All of the options below are available to customize iPanorama 360°.

<div class='ipnrm-popover'>
	<div class='ipnrm-close'></div>
	<div class='ipnrm-arrow'></div>
	<div class='ipnrm-content'></div>
</div>

function(yaw, pitch, cameraYaw, cameraPitch, cameraZoom, event) {}

function(cameraYaw, cameraPitch, cameraZoom) {}

function(event) {} 

function() {} 

Options for the scene definition

Options for the hotspot definition

Example:

$("#panorama").ipanorama("loadscene", {sceneId: "main"});
$("#panorama").ipanorama("loadhotspots", {sceneId: "main", hotSpots: []})
$("#panorama").ipanorama("lookat", {yaw: 0, pitch: 0})
$("#panorama").ipanorama("fullscreen");
$("#panorama").ipanorama("grab")
$("#panorama").ipanorama("instance")
$("#panorama").ipanorama("resize");
$("#panorama").ipanorama("destroy");

1. Download the Brackets editor and install it on your local computer.
2. Download the zipped plugin pack to your local computer from CodeCanyon and extract the ZIP file contents to a folder on your local computer.
3. Run Brackets editor.
4. Click on the "File" > "Open Folder...". In the extracted folder you will find the folder 'ipanorama'. Select it.
5. Find and select the file 'index.html' in the folder 'demo'.
6. Click on the "File" > "Live Preview".
7. Check plugin working.

I've used the following libraries:

• jQuery - http://www.jquery.com
• Three.js - https://github.com/mrdoob/three.js
• FontAwesome - https://github.com/FortAwesome/Font-Awesome
• Effect.Less – https://github.com/MaxLawrence/Effect.less

Once again, Thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. No guarantees, but I'll do my best to assist. Feel free to rate my plugin as 5 out of 5 stars. If it's not a 5 of out 5, e-mail me and let me know what I can do to improve your experience.

Max Lawrence, avirtum@gmail.com