iPanorama 360

The jquery virtual tour plugin with a builder


iPanorama 360° Virtual Tour 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.


  • 3 Scene Types - cube, sphere and cylinder
  • HotSpots - allows you to mark different areas that you want to point out
  • Virtual Tour – travel from one to another scene by clicking on special hotspots
  • Tooltip System – the plugin has a build-in powerful tooltip system
  • Compass – you can be sure to look forward
  • Preview Image – you can set an image that will show as a preview
  • Fullscreen – you can toggle from the normal state to fullscreen and back
  • Mouse Wheel – zoom with mouse wheel scrolling
  • Keyboard – arrows can be used for navigation through the scene
  • Touch – touch was used for navigation tasks
  • Autoplay - the scene autorotate around a vertical axis
  • Awesome Looks - 2 predefined themes
  • View customization - create your own theme
  • Powerful API - over 45 options
  • Easy Integration
  • Help via Email
  • and so more..

How To Use

Which panorama image you can use?


Horizontal and vertical 360° images with 1:2 ratio


Images with 1:6 ratio, easy for ceiling, floor, tripod retouch.


A circle panorama without top and floor

For better compatibility, please use images that have power-of-two resolution (4096x2048, 2048x1024 and etc), because some old GPUs only support power-of-two textures.

Setup your config

If you want to create a config quickly and easily, without having to worry about manual changes, use our builder. The builder is a web-based designing app and it's included in the package. It enables users to create a virtual tour in a short period. This saves you so much in terms of time and resources. The following video tutorial will show you how to build a simple config using the builder and publish a virtual tour on your site. This video is a quick overview of using the builder. Please use our contact form if you have any further questions.

Create a simple HTML 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 with unique ID:

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

4. Finally just call the plugin with your ID as parameter

4.1 Simple example


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

	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",