Class: PhotoSphereViewer

PhotoSphereViewer

new PhotoSphereViewer(args)

Represents a panorama viewer.

Parameters:
Name Type Description
args object

Settings to apply to the viewer

Properties
Name Type Attributes Default Description
panorama string

Panorama URL or path (absolute or relative)

container HTMLElement

Panorama container (should be a div or equivalent)

autoload boolean <optional>
true

true to automatically load the panorama, false to load it later (with the .load method)

usexmpdata boolean <optional>
true

true if Photo Sphere Viewer must read XMP data, false if it is not necessary

pano_size object <optional>
null

The panorama size, if cropped (unnecessary if XMP data can be read)

Properties
Name Type Attributes Default Description
full_width number <optional>
null

The full panorama width, before crop (the image width if null)

full_height number <optional>
null

The full panorama height, before crop (the image height if null)

cropped_width number <optional>
null

The cropped panorama width (the image width if null)

cropped_height number <optional>
null

The cropped panorama height (the image height if null)

cropped_x number <optional>
null

The cropped panorama horizontal offset relative to the full width (middle if null)

cropped_y number <optional>
null

The cropped panorama vertical offset relative to the full height (middle if null)

default_position object <optional>

Defines the default position (the first point seen by the user)

Properties
Name Type Attributes Default Description
long number | string <optional>
0

Default longitude, in radians (or in degrees if indicated, e.g. '45deg')

lat number | string <optional>
0

Default latitude, in radians (or in degrees if indicated, e.g. '45deg')

min_fov number <optional>
30

The minimal field of view, in degrees, between 1 and 179

max_fov number <optional>
90

The maximal field of view, in degrees, between 1 and 179

allow_user_interactions boolean <optional>
true

If set to false, the user won't be able to interact with the panorama (navigation bar is then disabled)

tilt_up_max number | string <optional>
π/2

The maximal tilt up angle, in radians (or in degrees if indicated, e.g. '30deg')

tilt_down_max number | string <optional>
π/2

The maximal tilt down angle, in radians (or in degrees if indicated, e.g. '30deg')

min_longitude number | string <optional>
0

The minimal longitude to show

max_longitude number | string <optional>

The maximal longitude to show

zoom_level number <optional>
0

The default zoom level, between 0 and 100

long_offset number <optional>
π/360

The longitude to travel per pixel moved by mouse/touch

lat_offset number <optional>
π/180

The latitude to travel per pixel moved by mouse/touch

time_anim integer <optional>
2000

Delay before automatically animating the panorama in milliseconds, false to not animate

reverse_anim boolean <optional>
true

true if horizontal animation must be reversed when min/max longitude is reached (only if the whole circle is not described)

anim_speed string <optional>
2rpm

Animation speed in radians/degrees/revolutions per second/minute

vertical_anim_speed string <optional>
2rpm

Vertical animation speed in radians/degrees/revolutions per second/minute

vertical_anim_target number | string <optional>
0

Latitude to target during the autorotate animation, default to the equator

navbar boolean <optional>
false

Display the navigation bar if set to true

navbar_style object <optional>

Style of the navigation bar

Properties
Name Type Attributes Default Description
backgroundColor string <optional>
rgba(61, 61, 61, 0.5)

Navigation bar background color

buttonsColor string <optional>
rgba(255, 255, 255, 0.7)

Buttons foreground color

buttonsBackgroundColor string <optional>
transparent

Buttons background color

activeButtonsBackgroundColor string <optional>
rgba(255, 255, 255, 0.1)

Active buttons background color

buttonsHeight number <optional>
20

Buttons height in pixels

autorotateThickness number <optional>
1

Autorotate icon thickness in pixels

zoomRangeWidth number <optional>
50

Zoom range width in pixels

zoomRangeThickness number <optional>
1

Zoom range thickness in pixels

zoomRangeDisk number <optional>
7

Zoom range disk diameter in pixels

fullscreenRatio number <optional>
4/3

Fullscreen icon ratio (width/height)

fullscreenThickness number <optional>
2

Fullscreen icon thickness in pixels

loading_msg string <optional>
Loading…

Loading message

loading_img string <optional>
null

Loading image URL or path (absolute or relative)

loading_html HTMLElement | string <optional>
null

An HTML loader (element to append to the container or string representing the HTML)

size object <optional>

Final size of the panorama container (e.g. {width: 500, height: 300})

Properties
Name Type Attributes Description
width number | string <optional>

Final width in percentage (e.g. '50%') or pixels (e.g. 500 or '500px') ; default to current width

height number | string <optional>

Final height in percentage or pixels ; default to current height

onready PhotoSphereViewer~onReady <optional>

Function called once the panorama is ready and the first image is displayed

Source:

Methods

addAction(name, f) → {void}

Adds a function to execute when a given action occurs.

Parameters:
Name Type Description
name string

The action name

f function

The handler function

Source:
Returns:
Type
void

fitToContainer() → {void}

Resizes the canvas to make it fit the container.

Source:
Returns:
Type
void

getPosition() → {object}

Returns the current position in radians

Source:
Returns:

A longitude/latitude couple

Type
object

getPositionInDegrees() → {object}

Returns the current position in degrees

Source:
Returns:

A longitude/latitude couple

Type
object

load() → {void}

Starts to load the panorama.

Source:
Returns:
Type
void

moveTo(longitude, latitude) → {void}

Moves to a specific position

Parameters:
Name Type Description
longitude number | string

The longitude of the targeted point

latitude number | string

The latitude of the targeted point

Source:
Returns:
Type
void

toggleAutorotate() → {void}

Launches/stops the autorotate animation.

Source:
Returns:
Type
void

toggleDeviceOrientation() → {void}

Starts/stops following the device orientation.

Source:
Returns:
Type
void

toggleFullscreen() → {void}

Enables/disables fullscreen.

Source:
Returns:
Type
void

toggleStereo() → {void}

Toggles the stereo effect (virtual reality).

Source:
Returns:
Type
void

zoom(level) → {void}

Sets the new zoom level.

Parameters:
Name Type Description
level integer

New zoom level

Source:
Returns:
Type
void

zoomIn() → {void}

Zoom in.

Source:
Returns:
Type
void

zoomOut() → {void}

Zoom out.

Source:
Returns:
Type
void

Type Definitions

onAutorotateChanged(enabled)

Indicates that the autorotate animation state has changed.

Parameters:
Name Type Description
enabled boolean

true if animation is enabled, false otherwise

Source:

onDeviceOrientationStateChanged(state)

Indicates that we starts/stops following the device orientation.

Parameters:
Name Type Description
state boolean

true if device orientation is followed, false otherwise

Source:

onFullscreenToggled(enabled)

Indicates that the fullscreen mode has been toggled.

Parameters:
Name Type Description
enabled boolean

true if fullscreen is enabled, false otherwise

Source:

onReady()

Indicates that the loading is finished: the first image is rendered

Source:

onStereoEffectToggled(enabled)

Indicates that the stereo effect has been toggled.

Parameters:
Name Type Description
enabled boolean

true if stereo effect is enabled, false otherwise

Source:

onZoomUpdated(zoom_level)

Indicates that the zoom level has changed.

Parameters:
Name Type Description
zoom_level number

The new zoom level

Source: