What is iPanorama 360°

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.

FullScreen Example

Feature List

  • 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
  • LESS Files - create your own theme
  • Powerful API - over 45 options
  • Easy Integration
  • Help via Email
  • and so more..
iPanorama 360 Preview

How To Use

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",
				}
			],
		}
	},
});

Options

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

Option Type Default Description
themeStringipnrm-default CSS styles for controls, change it to match your own theme
imagePreviewStringnull specifies a URL for a preview image to display before the panorama is loaded
autoLoadBoolfalse when set to true, the panorama will automatically load, when false, the user needs to click on the load button to load the panorama
autoRotateBoolfalse setting this parameter causes the panorama to automatically rotate when loaded, the value specifies the rotation speed in degrees per second, positive is counter-clockwise, and negative is clockwise
autoRotateInactivityDelayInt3000 sets the delay, in milliseconds, to start automatically rotating the panorama after user activity ceases, this parameter only has an effect if the autoRotate parameter is set
mouseWheelRotateBoolfalse enable or disable rotating on mouse wheel
mouseWheelRotateCoefFloat0.2 the coefficient by which the panorama is rotated on each mousewheel unit
mouseWheelZoomBooltrue enable or disable zooming on mouse wheel
mouseWheelZoomCoefFloat0.05 the coefficient by which the panorama is zoomed on each mousewheel unit, this parameter only has an effect if the mouseWheelRotate parameter is set to false
hoverGrabBoolfalse enable or disable grabbing on mouse hover
hoverGrabYawCoefFloat20 the coefficient by which the yaw angle is changed on each mouse move unit
hoverGrabPitchCoefFloat20 the coefficient by which the pitch angle is changed on each mouse move unit
grabBooltrue enable or disable grabbing on mouse click
grabCoefFloat0.1 the coefficient by which the panorama is moved on each mouse grab unit
showControlsOnHoverBoolfalse determines whether the controls should be shown when hovering on the panorama
showSceneThumbsCtrlBoolfalse show or hide the scene thumbs control
showSceneMenuCtrlBoolfalse show or hide the scene menu control
showSceneNextPrevCtrlBooltrue show or hide the scene next and prev controls
showShareCtrlBooltrue show or hide the stereo view toggle control
showZoomCtrlBooltrue show or hide the zoom controls
showFullscreenCtrlBooltrue show or hide the fullscreen toggle control
sceneThumbsVerticalBooltrue change scene thumbs's direction from horizontal to vertical
keyboardNavBooltrue set or disable navigation with keyboard (arrows keys)
keyboardZoomBooltrue set or disable zoom with keyboard (plus and minus keys)
titleBooltrue show or hide the title control
compassBooltrue enable or disable the compass
sceneNextPrevLoopBoolfalse set or disable loop for the scene navigation with next & prev controls
popoverBooltrue enable or disable the build-in popover system
popoverTemplateString base HTML to use when creating the popover
<div class='ipnrm-popover'>
	<div class='ipnrm-close'></div>
	<div class='ipnrm-arrow'></div>
	<div class='ipnrm-content'></div>
</div>
popoverPlacementStringtop set the position of the popover on top, bottom, left or the right side of the hotspot
popoverShowTriggerStringhover specify how popover is triggered (click, hover)
popoverHideTriggerStringleave specify how popover is hidden (click, leave, grab, manual)
hotSpotBelowPopoverBooltrue specify the z-order of the hotSpot against the popover
popoverShowClassStringnull

specify the css3 animation class for the popover show

Note

You can use my open-source library Effect.less with over 100 animation classes
popoverHideClassStringnull

specify the css3 animation class for the popover hide

Note

You can use my open-source library Effect.less with over 100 animation classes
sceneIdStringnull id of the scene to load first
sceneFadeDurationInt3000 specify the fade duration, in milliseconds, when transitioning between scenes
pitchLimitsBooltrue enable or disable the pitch limits
hotSpotSetupBoolfalse set or disable manual setup of hotspots in the current scene
onHotSpotSetupCallbacknull callback funtion, if set, it will fire after click in the panorama
function(yaw, pitch, cameraYaw, cameraPitch, cameraZoom) {}
onShareCallbacknull callback funtion, if set, it will fire after the user click on the share control
function(event) {} 
mobileBoolfalse enable or disable the animation in the mobile browsers

Options for the scene definition

Option Type Default Description
typeString"cube" Specifies the scene type ("cube", "sphere", "cylinder")
imageString/Objectnull full file name specify the background of the scene, for the 'cube' type scene you have to define six textures
thumbBoolfalse enable or disable the scene thumb
thumbImageStringnull full file name specify the thumbnail of the scene
yawInt0 sets the panorama’s starting yaw position in degrees
pitchInt0 sets the panorama’s starting pitch position in degrees
zoomInt75 sets the panorama’s starting zoom from 40 to 100
titleHtmlBoolfalse specify the type of the scene title
titleSelectorStringnull specify the selector for select a single element with a content for the title
titleStringnull if set, the value is displayed as the panorama’s scene title, it can be text or HTML content
compassNorthOffsetIntnull set the offset, in degrees, of the center of the panorama from North, as this affects the compass, it only has an effect if compass is set to true
hotSpotsArray[] specifies an array of hot spots that can be links to other scenes or information

Options for the hotspot definition

Option Type Default Description
yawInt0 specify the yaw portion of the hot spot’s location
pitchInt0 specify the pitch portion of the hot spot’s location
sceneIdStringnull specify the id of the scene to link to
classNameStringnull specify additional css classes
popoverLazyloadBooltrue enable or disable lazy load for the popover content
popoverShowBoolfalse show the popover content when the scene's loaded
contentStringnull if set, the value is displayed as the hotspot's content
popoverHtmlBooltrue specify the type of the popover content
popoverContentStringnull if set, the value is displayed as the popover's content, it can be text or HTML content, or a method - function myfunc()
popoverSelectorStringnull specify the selector for select a single element with a content for the popover
popoverPlacementStringtop set the position of the popover on top, bottom, left or the right side of the hotspot
userDataObjectnull specify the user data that is associated with the hotspot, useful when the popoverContent is a method

Methods

Method Parameters Description
destroydestroy the plugin, this reverts all plugin elements back to their original state (before calling the plugin)
loadscenesceneIdload the specific scene
loadhotspotssceneId, hotSpotsload hotspots into the specific scene
lookatyaw, pitchchange the LookAt vector of the camera
fullscreenswitch to fullscreen mode and back
resizeyou should call this after the layout is changed

Example:

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