Web Integration

Embed customized 360ty 360° Tours in your website

EN - Documentation Web Integration

EN - Documentation Web Integration

Terminology [EN] | Web Integration

Node

A node is a 360 ​​° image. The panorama tour consists of nodes that are connected by hotspots.

Hotspot

A hotspot is the connection point between 2 nodes, the circle that leads to the next node when you click it.

FOV

FOV (Field of View) describes the zoom variable of a node. This is given in °. The default value is 70. The lower the value, the closer you zoom in. The limit values ​​vary depending on the node and the image resolution, but are mostly between 5 and 100.

Tilt

Tilt describes the vertical alignment of a node. This is given in °. The limit values ​​are -90 to 90. At -90 ° you look into the ground and at 90 ° you look at the sky. At 0 ° just ahead.

Pan

Pan describes the horizontal alignment of a node. This is given in °. The limit values ​​are -360 to 360. The algebraic sign indicates the direction. + = clockwise, - = counterclockwise. +/- 90 ° is a quarter turn, +/- 180 ° is a half turn ...

Keyframe

A keyframe is a position, which is moved to from the previous position.

Movement/Fly-in

The Movement / Fly-in moves the image from a start position to a target position when the node is called.

Start values

The start values ​​are the positions at which the movement / Fly-in starts

Target Values

The target values ​​are the positions at which the movement / fly-in ends. If no movement / no fly-in is set, the target values ​​are the positions on which the tour is started.

Control

A control element is an input field in Elementor

EN - Documentation Web Integration

360ty Elementor Addon - WordPress Plugin [EN] | Web Integration

installation

WordPress Dashboard

      1. download the Plugin here 
      2. Navigate to your WeordPress Dashboard -> Plugins
      3. Click on the “Install” button to the right of the “Plugins” heading
      4. At the same place, click on the “Upload Plugin” button, select the downloaded .zip file and click on "install now"
      5. Click on the "activate Plugin" button
      6. Now you should see a new Widget-category called "360ty" in the Elementor Widget-tab.

Filebrowser

      1. download the Plugin here and unzip the .zip file
      2. Navigate to your WordPress folder -> wp-content -> plugins
      3. Paste the extracted folder into the plugins folder
      4. Activate the “360ty Elementor Addon” plugin in your WordPress dashboard -> Plugins -> installed plugins
      5. Now you should see a new Widget-category called "360ty" in the Elementor Widget-tab.

CLI

Windows

      1. Open a terminal (e.g .: CMD)
      2. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      3. Navigate to your plugins folder (cd wp-content/plugins)
      4. execute this Commandline:
git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Linux

      1. Open a terminal (e.g .: Shell)
      2. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      3. Navigate to your plugins folder (cd wp-content/plugins)
      4. execute this Commandline:
git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Mac-OS

      1. Open a terminal (e.g .: CMD)
      2. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      3. Navigate to your plugins folder (cd wp-content/plugins)

      4. execute this Commandline:

git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

SSH

Windows

      1. open an SSH Client (e.g .: Putty)
      2. Connect to your web server on which WordPress is located
      3. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      4. Navigate to your plugins folder (cd wp-content/plugins)
      5. execute this Commandline:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Linux

      1. Open a terminal (e.g .: Shell)
      2. Connect to your web server on which WordPress is located
      3. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      4. Navigate to your plugins folder (cd wp-content/plugins)
      5. execute this Commandline:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Mac-OS

      1. Open a terminal (e.g .: CMD)
      2. Connect to your web server on which WordPress is located
      3. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      4. Navigate to your plugins folder (cd wp-content/plugins)
      5. execute this Commandline:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Plugin Guide

As soon as the plugin has been installed and activated, a new category “360ty” appears in the Elementor widget panel, in which the 360ty Tourbuilder widget can be found

Controls

With the middle mouse button (keep mouse wheel pressed) you can move around in the panorama tour. The scrolling of the mouse wheel is used to zoom. You can left-click on hotspots to change nodes.

Set values to current Position

This button sets the start position of the tour the current position of the preview. This button can only be seen in the Elementor Editor.
Sets following Control-values:

Set to current Values Picture

Section: Content

Subsection: Tour Options

Basepath

The basepath is the URL on which the tour files can be found on.

start Node

The start node indicates on which node the tour should start when called. The start node can be set with the value setter buttons.

FOV

FOV (Field of View) indicates the zoom value of the start position.

Tilt

Indicates the vertical position of the start position

Pan

Indicates the horizontal postion of the start position

Subsection: Movement Options​

Delay

The time in milliseconds after loading the tour after which the movement begins.

Loop Amount

How often the keyframes should repeat. If the value is 0, the keyframes are ignored.

Keyframes

Each keyframe has a position, which is moved to from the previous Keyframe. The first Keyframe moves from the start position

Subsection: Additional Options​

Remove Hotspots

Deactivates all hotspots. This means that the node cannot be changed in the Panorama Tour. Only shows the start node.

Show share Buttons

Creates a share button in the lower left corner of the element. When you click on the share button, two new buttons are created. One that copies a link to the current position in the tour to the clipboard and one that opens a window to share the current position of the tour on Facebook.

Show Impressum

Creates a link in the lower right corner leading to our website 

Section: Style

Subsection: Tour

Width

Indicates the width of the panorama tour. Can be specified in px and%. If no unit is specified, pixels (px) are used.

Aspect Ratio

Specifies the aspect ratio of the panorama tour. Values ​​are given in x: y, where x is the given width and y is calculated from it.

Custom Aspect Ratio

Can only be used if the control “Aspect Ratio” has the value “Custom Aspect Ratio”.
A user-defined aspect ratio can be entered here. Format: x [number]: y [number]

Custom Height

Can only be used if the “Aspect Ratio” control has the value “Custom Height”.
A user-defined height for the panorama tour can be entered here. Can be specified in px and %. If no unit is specified, pixels (px) are used.

Horizontal Alignment

Specifies where the panorama tour should be horizontally aligned within the widget.

Subsection: Hotspots

Pulse Color

Sets the color of the pulse of the hotspots

EN - Documentation Web Integration

Tourbuilder Web-App [EN] | Web Integration

Settings / Tourbuilder

Tour-Options

Tour

Basepath

The basepath is the URL on which the tour files can be found on.

Set to current Position

This button sets basepath, start node, FOV, Tilt and Pan to the current position of the preview.

start Node

The start node indicates on which node the tour should start when called.

FOV

FOV (Field of View) indicates the zoom value with which the tour should start when called.

Tilt

Tilt indicates the vertical position with which the tour should start when called.

Pan

Pan indicates the horizontal position with which the tour should start when called.

Addons

Can be set individually for desktop, tablet and mobile.

Remove Hotspots

Deactivates all hotspots. This means that the node cannot be changed in the Panorama Tour. Only shows the start node.

Share Buttons

Creates a share button in the lower left corner of the element. When you click on the share button, two new buttons are created. One that copies a link to the current position in the tour to the clipboard and one that opens a window to share the current position of the tour on Facebook.

Impressum

Movement

If keyframes have been set, the tour automatically moves to the set keyframes. The movement is canceled if the user moves the tour himself with a click of the mouse. Click on “Run Preview” to see a preview of the set keyframes.

Movement

Loop Amount

Specifies how often the movement should repeat itself. If the value is 0, all keyframes are ignored and no movement is generated.

Delay

Specifies how long to wait before the movement starts after loading the tour (in milliseconds).

Keyframes

Each keyframe has a position to moveto from the previous keyframe. For the 1st keyframe, the tour move from the start position.

add Keyframe

Generates a keyframe at the current position of the preview.

set to current Position

Sets the keyframe to the current position of the preview.

Node

The node to which the keyframe should move to.

FOV

The zoom value to which the keyframe should move to.

Tilt

The vertical position to which the keyframe should move to.

Pan

The horizontal position to which the keyframe should move to.

Movement Speed

How fast the movement should take place. (x * standard speed) => x = 0.5 -> half as fast, x = 2 -> twice as fast

Locked Controls

The gestures with which the user cannot cancel the movement. A mouse click always aborts the movement. If clicks are still blocked (all, mouse), the movement is only canceled as soon as the movement of the active keyframe has been completed.

Style

Tour Styles

Can be set individually for desktop, tablet and mobile.

Click on “update view” to update the style of the preview

Width

Width of the tour. Can be specified in all CSS units (e.g .:%, px, vw, em ...)

Aspect Ratio

Height of the tour calculated from the specified width => y = x / (xRatio / yRatio) *

Horizontal Alignment

If the width is not 100%, where the tour should be horizontally aligned.

Hotspot Styles

Click on “update view” to update the style of the preview

Pulse Color

Color of the pulse of the hotspots. Specified in HEX code (e.g .: #FFFFFF -> white)

Run Preview

Shows what the tour looks like when the page is called.

Get Code

Place the div where the tour should be embedded.
If several tours are integrated on one page, the external scripts and stylesheets do not have to be integrated again. However, the id of the div has to be changed because it has to be unique. The ID must also be changed in the class instantiation. -> new Pano ("newID", ...). The variable name (tour_360ty) must also be changed, as this has to be unique too.

Head

Code that is inserted into <head> the tag.

Body

Code that is inserted into the <body> tag.

 

EN - Documentation Web Integration

iFrame [EN] | Web Integration

How it works

Here you can find our Tool for iFrame embeds.

With the iFrame integration, parameters are given in the URL of the “src” tag. These parameters can be used to set customized settings for the tour.
If a parameter is not specified, a standard value is used, which is different in each tour.
The URL parameters are case-sensitive!
Example: https://bregenzsommer.360ty.cloud/?Pano=node15&PanoFovStart=18&PanoTiltStart=-13&PanoPanStart=53&PanoPanTarget=-8&PanoTiltTarget=-13&PanoFovTarget=52&MoveSpeed=2.5&MoveDelay=1500&MoveLock=Mousewheel
After the URI (here "https://bregenzsommer.360ty.cloud/”) follows a “?”. After the "?" the parameters are read. Then the parameters can be used. The parameters are divided by an “&” and the values ​​are assigned with an “=”.

URL Parameter

Position

Pano=node[nummer] -> set start-node
PanoFovTarget=[number(0 – 100 in °)] -> FOV value of the start node or target FOV position of the fly-in movement
PanoTiltTarget = [number(-90 - 90 in °)] -> Tilt value of the start node or vertical target position of the fly-in movement
PanoPanTarget=[number(-360 – 360 in °)] -> Pan value of the start node or horizontal target position of the fly-in movement

Fly-in

AutoMove -> Activates the movement / fly-in
PanoFovStart=[number(0 – 100 in °)] -> FOV value of the start position of the Fly-in
PanoTiltStart=[number(-90 – 90 in °)] -> Tilt value of the target position of the fly-in
PanoPanStart=[number(-360 – 360 in °)] -> Pan value of the target position of the fly-in
MoveLock=[All,Mousewheel,Mouse,Keyboard,Keyboard_Mousewheel] -> prevents interactions with the tour during the fly-in motion, by the specified type
MoveDelay=[number in ms] -> starts the fly-in according to the specified value in milliseconds. Default 500
MoveSpeed=[number] -> multiplies the standard speed with the specified value

Hotspots

SingleImage -> hides hotspots

Example

<iframe src=`https://bregenzsommer.360ty.cloud/?Pano=node15
        &PanoFovStart=18&PanoTiltStart=-13&PanoPanStart=53&PanoPanTarget=-8
        &PanoTiltTarget=-13&PanoFovTarget=52&MoveSpeed=2.5&MoveDelay=1500&MoveLock=Mousewheel`
        style = “height: 40vh; width: 100%”>
</iframe>

DE - Dokumentation Webeinbindung

DE - Dokumentation Webeinbindung

Begriffe [DE] | Web Integration

Node

Der Basepath ist die URL auf der die 360° Tour liegt

Hotspot

Ein Hotspot ist der Verbindungspunkt zwischen 2 nodes, der Kreis, der beim Klicken auf die nächste node führt.

FOV

FOV (Field of View) bezeichnet die Zoom variable einer Node. Dies wird in ° angegeben. Der Standardwert liegt dabei bei 65. Je niedriger der Wert, desto näher wird herangezoomt. Die Grenzwerte sind je nach Node und Bildauflösung verschieden aber liegen meistens zwischen 5 und 100.

Tilt

Tilt bezeichnet die vertikale Ausrichtung einer Node. Dies wird in ° angegeben. Die Grenzwerte liegen dabei bei -90 bis 90. Bei -90° schaut man in den Boden und bei 90° in den Himmel. Bei 0° gerade noch vorne.

Pan

Pan bezeichnet die horizontale Ausrichtung einer Node. Dies wird in ° angegeben. Die Grenzwerte liegen dabei bei -360 bis 360. Das Vorzeichen gibt dabei die Richtung an. + = im Uhrzeigersinn, – = gegen den Uhrzeigersinn. +/-90° ist eine viertel Drehung, +/-180° ist eine halbe Drehungung…

Keyframe

Ein Keyframe ist eine ist eine Position, auf die von der vorherigen Position aus gewechselt wird.

Movement/Fly-in

Das Movement/Die Fly-in Bewegung bewegt das Bild beim Aufruf der Node von einer Startposition zu einer Zielposition.

Start Werte

Die Start Werte sind die Positionen, bei der das Movement/die Fly-in Bewegung startet

Target Werte

Die Target Werte sind die Positionen, bei der das Movement/die Fly-in Bewegung endet. Falls kein Movement/ keine Fly-in Bewegung gesetzt ist, sind die Target Werte, die Positionen, auf der die Tour gestartet werden.

Control

Ein Control-Element ist ein Input-Feld in Elementor

DE - Dokumentation Webeinbindung

360ty Elementor Addon - WordPress Plugin [DE] | Web Integration

installation

WordPress Dashboard

      1. Lade das Plugin hier herunter
      2. Gehe zu deinem WordPress Dashboard -> Plugins
      3. Klicke auf den “Installieren” Button rechts neben der Überschrift “Plugins”
      4. An der selben stelle, klicke nun auf den “Plugin hochladen” Button, wähle die heruntergeladene .zip Datei aus und klicke auf Jetzt installieren
      5. Klicke auf den “Plugin aktivieren” Button
      6. Nun sollte eine Widget-Kategorie namens “360ty” im Elementor Widget-Tab zu sehen sein.

Filebrowser

      1. Lade das Plugin hier herunter und entpacke die .zip Datei
      2. Wechsle zu deinem WordPress Ordner -> wp-content-> plugins
      3. Füge den extrahierten Ordner in den Plugins Ordner ein
      4. Aktiviere das “360ty Elementor Addon” Plugin in deinem WordPress Dashboard -> Plugins -> installierte Plugins
      5. Nun sollte eine Widget-Kategorie namens “360ty” im Elementor Widget-Tab zu sehen sein.

CLI

Windows

      1. Öffne eine Terminalanwendung (z.B.: CMD)
      2. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      3. Gehe zum Plugins Ordner (cd wp-content/plugins)
      4. führe diese Commandline aus:
git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Linux

      1. Öffne eine Terminalanwendung (z.B.: Shell)
      2. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      3. Gehe zum Plugins Ordner (cd wp-content/plugins)
      4. führe diese Commandline aus:
git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Mac-OS

      1. Öffne eine Terminalanwendung (z.B.: Terminal)
      2. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      3. Gehe zum Plugins Ordner (cd wp-content/plugins)
      4. führe diese Commandline aus:
git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

SSH

Windows

      1. Öffne einen SSH Client (z.B.: Putty)
      2. Verbinde dich mit deinem Webserver, auf dem WordPress liegt
      3. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      4. Gehe zum Plugins Ordner (cd wp-content/plugins)
      5. führe diese Commandline aus:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Linux

      1. Öffne eine Terminalanwendung (z.B.: Shell)
      2. Verbinde dich mit deinem Webserver, auf dem WordPress liegt
      3. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      4. Gehe zum Plugins Ordner (cd wp-content/plugins)
      5. führe diese Commandline aus:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Mac-OS

      1. Öffne eine Terminalanwendung (z.B.: Terminal)
      2. Verbinde dich mit deinem Webserver, auf dem WordPress liegt
      3. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      4. Gehe zum Plugins Ordner (cd wp-content/plugins)
      5. führe diese Commandline aus:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Plugin Guide

Sobald Das Plugin Installiert und Aktiviert wurde, kommt beim Elementor Widget-Panel eine neue Kategorie “360ty” zum Vorschein, in der das 360ty Tourbuilder Widget zu finden ist

Controls

Mit der Mittleren Maustaste (Mausrad gedrückt halten) kannst du dich in der Panorama Tour bewegen. Zum zoomen wird das Scrolling vom Mausrad verwendet. Auf Hotspots kann mit der linken Maustaste geklickt werden, um die Node zu wechseln.

Set values to current Position

Dieser Button setzt die Startposition der Tour die jetzige Position des Previews. Dieser Button ist nur im Elementor Editor zu sehen.
Setzt folgende Control-Werte:

Set to current Values Picture

Section: Inhalt

Subsection: Tour Options

Basepath

Der Basepath ist die URL, auf der die Tour-Dateien zu finden sind.

start Node

Die start Node gibt an, auf welcher Node die Tour beim Aufruf starten soll. Die start Node kann mit den Value Setter Buttons gesetzt werden.

FOV

FOV(Field of View) gibt den Zoom Wert der Startposition an.

Tilt

Tilt gibt die vertikale Position der Startposition an.

Pan

Pan gibt die horizontale Position der Startposition an.

Subsection: Movement Options​

Delay

Die Zeit in Millisekunden nach dem laden der Tour, nach der das Movement anfängt.

Loop Amount

Wie oft sich die Keyframes wiederholen sollen. Falls der Wert 0 ist, werden die Keyframes ignoriert.

Keyframes

Jeder Keyframe hat ein Position, auf die von dem vorherigen Keyframe gewechselt wurde. Der erste Keyframe wechselt von der start Position der Tour aus

Subsection: Additional Options​

Remove Hotspots

Deaktiviert alle Hotspots. Somit kann in der Panorama Tour nicht die Node gewechselt werden. Zeigt nur die Start Node.

Show share Buttons

Erzeugt einen share Button in der linken unteren Ecke des Elements. Bei Klick auf den share Button werden zwei neue Buttons erzeugt. Einer, der einen link zur aktuellen Position in der Tour in die Zwischenablage kopiert und einen, der ein Fenster öffnet, um die aktuelle Position in der Tour auf Facebook zu teilen.

Show Impressum

Section: Stil

Subsection: Tour

Width

Gibt die Weite der Panorama Tour an. Kann in px und % angegeben werden. Falls keine Einheit angegeben wird, werden Pixel (px) genutzt.

Aspect Ratio

Gibt die Aspect Ratio der Panorama Tour an. Werte sind angegeben in x:y, wobei x die angegeben width ist und y daraus berechnet wird.

Custom Aspect Ratio

Kann nur genutzt werden, falls der Control “Aspect Ratio” den Wert “Custom Aspect Ratio” hat.
Hier kann eine benutzerdefinierte aspect ratio eingegeben werden. Format: x[nummer]:y[nummer]

Custom Height

Kann nur genutzt werden, falls der Control “Aspect Ratio” den Wert “Custom Height” hat.
Hier kann eine benutzerdefinierte Höhe für die Panorama Tour eingegeben werden. Kann in px und % angegeben werden. Falls keine Einheit angegeben wird, werden Pixel (px) genutzt.

Horizontal Alignment

Gibt an, wo die Panorama Tour Horizontal innerhalb des Widgets positioniert sein soll.

Subsection: Hotspots

Pulse Color

Setzt die Farbe des Pulses der Hotspots

DE - Dokumentation Webeinbindung

Tourbuilder Web-App [DE] | Web Integration

Einstellungen / Tourbuilder

Tour-Options

Tour

Basepath

Der Basepath ist die URL, auf der die Tour-Dateien zu finden sind.

Set to current Position

Dieser Button setzt basepath, start Node, FOV, Tilt und Pan auf die jetztige Position des Previews.

start Node

Die start Node gibt an, auf welcher Node die Tour beim Aufruf starten soll.

FOV

FOV(Field of View) gibt den Zoom Wert an, mit welchem die Tour beim Aufruf starten soll.

Tilt

Tilt gibt die vertikale Position an, mit welcher die Tour beim Aufruf starten soll.

Pan

Pan gibt die horizontale Position an, mit welcher die Tour beim Aufruf starten soll.

Addons

Kann individuell für desktop, tablet und mobile eingestellt werden.

Remove Hotspots

Deaktiviert alle Hotspots. Somit kann in der Panorama Tour nicht die Node gewechselt werden. Zeigt nur die Start Node.

Share Buttons

Erzeugt einen share Button in der linken unteren Ecke des Elements. Bei Klick auf den share Button werden zwei neue Buttons erzeugt. Einer, der einen link zur aktuellen Position in der Tour in die Zwischenablage kopiert und einen, der ein Fenster öffnet, um die aktuelle Position in der Tour auf Facebook zu teilen.

Impressum

Movement

Falls Keyframes gesetzt wurden, bewegt sich die Tour automatisch zu den gesetzten Keyframes. Das Movement wird abgebrochen, wenn der Nutzer die Tour per Mausklickt selber bewegt. Klicke auf “Run Preview” um eine Vorschau der gesetzen Keyframes zu sehen.

Movement

Loop Amount

Gibt an, wie oft sich die Bewegung zu den Keyframes wiederholen soll. Bei Wert 0 werden alle Keyframes ignoriert und keine Bewegung erzeugt.

Delay

Gibt an, wie lange gewartet werden soll, bevor das Movement nach laden der Tour startet (in Millisekunden).

Keyframes

Jeder Keyframe hat eine Position, zu der vom vorherigen Keyframe aus gewechselt wird. Für den 1. Keyframe wird von der start Position der Tour aus gewechselt.

add Keyframe

Erzeugt einen Keyframe an der jetztigen Position des Previews.

set to current Position

Setzt den Keyframe auf die jetztige Position des Previews.

Node

Die Node auf die der Keyframe wechseln soll.

FOV

Der Zoom Wert auf den der Keyframe wechseln soll.

Tilt

Die vertikale Position auf die der Keyframe wechseln soll.

Pan

Die Horizontale Position auf die der Keyframe wechseln soll.

Movement Speed

Wie schnell die Bewegung stattfinden soll. (x * standartGeschwindigkeit) => x=0.5 -> halb so schnell, x=2 -> doppelt so schnell

Locked Controls

Mit welchen Eingaben der Benutzer das Movement nicht abbrechen kann. Ein Mausklick bricht das Movement immer ab. Falls Klicks trotzdem blockiert sind (all, Mouse), wird das Movement erst abgebrochen, sobald die Bewegung des aktiven Keyframes abgeschlossen ist.

Style

Tour Styles

Kann individuell für desktop, tablet und mobile eingestellt werden.
Klicke auf “update view”, um den style des Previews upzudaten

Width

Breite der Tour. Kann in allen CSS Einheiten angegeben werden (z.B.: %,px,vw,em…)

Aspect Ratio

Höhe der Tour berechnet aus der angegebenen Breite => y = x/(xRatio/yRatio)*

Horizontal Alignment

Falls die Breite nicht 100% ist, wo die Tour horizontal liegen soll.

Hotspot Styles

Klicke auf “update view”, um den style des Previews upzudaten

Pulse Color

Farbe des Pulses der Hotspots. Angegeben in HEX-code (z.B.: #FFFFFF -> weiß)

Run Preview

Zeigt, wie die Tour beim Aufruf der Seite aussieht.

Get Code

Platziere das div, wo die Tour eingebunden werden soll.
Falls mehrere Touren auf einer Seite eingebunden werden, müssen die externen scripts und stylesheets nicht nochmal eingebunden werden. Jedoch muss die id des div’s geändert werden, da diese einzigartig sein muss. Die ID muss in der Klassen-Instaziierung ebenfalls geändert werden. -> new Pano(“newID“,…). Ebenfalls muss der variablenname (tour_360ty) geändert werden, da dieser auch einzigartig sein muss.

Head

Code, der in den <head> tag eingefügt wird.

Body

Code, der in den <body> tag eingefügt wird.

 

DE - Dokumentation Webeinbindung

iFrame [DE] | Web Integration

Wie es Funktioniert

Hier gehts zu unserem Tool für iFrame einbindungen

Bei der iFrame-Einbindung werden Parameter in der URL des “src” tags mitgegeben. Diese Parameter können genutzt werden, um Voreinstellungen der Tour zu setzen.
Falls ein Parameter nicht angegeben wird, wird ein Standartwert benutzt, der in jeder Tour unterschiedlich ist, genutzt.
Die URL Parameter sind case-sensitive!
Beispiel: https://bregenzsommer.360ty.cloud/?Pano=node15&PanoFovStart=18&PanoTiltStart=-13&PanoPanStart=53&PanoPanTarget=-8&PanoTiltTarget=-13&PanoFovTarget=52&MoveSpeed=2.5&MoveDelay=1500&MoveLock=Mousewheel
Nach der URI (hier “https://bregenzsommer.360ty.cloud/”) folgt ein “?”. Ab dem “?” werden die Parameter gelesen. Danach können die Parameter eingesetzt werden. Die Parameter werden durch ein “&” geteilt und die Werte mit einem “=” zugewiesen.

URL Parameter

Position

Pano=node[nummer] -> Anfangs-Node angeben
PanoFovTarget=[number(0 – 100 in °)] ->FOV Wert der Anfangs-Node bzw. Ziel-position der Fly-in Bewegung
PanoTiltTarget = [number(-90 - 90 in °)] -> Tilt Wert der Anfangs-Node bzw. Ziel-position der Fly-in Bewegung
PanoPanTarget=[number(-360 – 360 in °)] -> Pan Wert der Anfangs-Node bzw. Ziel-position der Fly-in Bewegung

Fly-in Bewegung

AutoMove -> Aktiviert das Movement/die Fly-in Bewegung
PanoFovStart=[number(0 – 100 in °)] -> FOV Wert der Zielposition der Fly-in Bewegung
PanoTiltStart=[number(-90 – 90 in °)] -> Tilt Wert der Zielposition der Fly-in Bewegung
PanoPanStart=[number(-360 – 360 in °)] ->Pan Wert der Zielposition der Fly-in Bewegung
MoveLock=[All,Mousewheel,Mouse,Keyboard,Keyboard_Mousewheel] -> verhindert interaktionen mit der Tour während der Fly-in Bewegung, durch den angegeben Typen
MoveDelay=[number in ms] -> startet die Fly-in Bewegung nach dem angegeben Wert in Millisekunden. Standardmäßig 500
MoveSpeed=[number] -> multipliziert die Standardgeschwindigkeit mit dem angegebenen Wert

Hotspots

SingleImage -> Hotspots werden verborgen

Beispiel

<iframe src=`https://bregenzsommer.360ty.cloud/?Pano=node15
        &PanoFovStart=18&PanoTiltStart=-13&PanoPanStart=53&PanoPanTarget=-8
        &PanoTiltTarget=-13&PanoFovTarget=52&MoveSpeed=2.5&MoveDelay=1500&MoveLock=Mousewheel`
        style = “height: 40vh; width: 100%”>
</iframe>