Tour Navigator

So funktioniert es.

Schritt 1 von 6 **Szenen und Gruppen auf einen Blick** Eine Vorschauleiste mit Gruppen-Tabs zeigt alle Szenen Ihrer Tour und rahmt die aktuelle Szene ein.

Szenen und Orte suchen — Schritt 1 von 6 **Szenen und Gruppen auf einen Blick** Eine Vorschauleiste mit Gruppen-Tabs zeigt alle Szenen Ihrer Tour und rahmt die aktuelle Szene ein.

Touren mit Dutzenden Szenen brauchen mehr als eine Reihe Vorschaubilder. Tour Navigator gibt Ihrer krpano-Tour eine Vorschauleiste, ein Vollbild-Raster, eine Seitenliste oder ein Auswahlmenü, auf dem Smartphone ein Menü am unteren Rand und in VR ein Panel – alles aus denselben Gruppen. Besucher finden jede Szene und jeden markierten Hotspot per Eingabe, auch in noch nicht geladenen Szenen, und jede Einstellung ist ein Attribut eines einzigen XML-Elements.

Installation.

1
Einen Ordner kopieren

Legen Sie den verschlüsselten Plugin-Ordner in Ihre Tour und fügen Sie Ihrer Tour-XML ein layer-Element (und optional ein include) hinzu.
2
Tour beschreiben

Legen Sie optional Gruppen an, markieren Sie Hotspots als durchsuchbare Orte und übersetzen Sie Titel mit dem <languages>-Element, das Sie bereits nutzen.
3
Aussehen wählen

Wählen Sie Layout, Farben und Verhalten über Attribute des layer-Elements; Rundung, Schrift und Hintergrund passen Sie mit sechs CSS-Variablen an.

Warum es den Unterschied macht.

Besucher finden, was sie suchen

Die Suche findet Szenen und Orte über Titel, Stichwörter und Gruppen, verzeiht Tippfehler und Akzente und springt direkt zum Ort.

Desktop und Smartphone

Leiste, Raster, Seitenliste oder Auswahlmenü am Desktop und ein touchfreundliches Menü am unteren Rand auf dem Smartphone.

Kein Server, keine Anfragen an Dritte

Alles läuft in Ihrer krpano-Tour. Geprüft mit krpano 1.23.2, 1.23.3 und 1.24 und für die Zusammenarbeit mit anderen z360-Plugins gemacht.

Screenshots.

Demo ausprobieren

**Desktop** Die Vorschauleiste mit Gruppen-Tabs in der Hotel-Demotour.

**Smartphone** Das Menü am unteren Rand mit Suche, Gruppen und Szenen auf einem Smartphone.

**Detail** Eine Suche findet Szenen und Orte, auch in noch nicht geladenen Szenen.

Einstellungen.

Als Attribute in der XML-Datei Ihrer Tour festlegen.

Einstellung	Typ	Standard	Beschreibung
`active`	Ja / Nein	`true`	Schaltet den Navigator zur Laufzeit ein oder aus; aus entfernt alle seine Teile.
`layout`	Liste	`bar`	Layout auf breiten Bildschirmen: Vorschauleiste, Vollbild-Raster, Seitenliste oder Auswahlmenü. `bargridsidedropdown`
`layout_mobile`	Liste	`sheet`	Auf Smartphones: eine schwebende Schaltfläche mit Menü am unteren Rand oder dasselbe Layout wie auf breiten Bildschirmen. `sheetsame`
`slot`	Liste	`auto`	Bildschirmposition des Navigators; auto nutzt unten mittig (Seitenliste: links mittig). `autotop-lefttop-centertop-rightmiddle-leftmiddle-rightbottom-leftbottom-centerbottom-right`
`offset`	Zahl	`16`	Abstand vom Bildschirmrand in Pixeln.
`max_width`	Zahl	`80`	Maximale Breite von Leiste und Auswahlmenü in Prozent der Viewer-Breite.
`start_open`	Ja / Nein	`true`	Ob Leiste und Seitenliste beim Start ausgeklappt sind.
`exclude_scenes`	Text	—	Szenennamen, die nie angezeigt oder durchsucht werden, durch Kommas getrennt.
`groups`	Liste	`auto`	Darstellung der Gruppen: automatisch je Layout, schrittweise (Drill-down) oder gar nicht. `autooffdrilldown`
`group_all`	Ja / Nein	`true`	Fügt die Gruppe „All“ mit allen Szenen hinzu; den Text ändern Sie mit text_all.
`start_group`	Text	`current`	Beim Start aktive Gruppe: die Gruppe der aktuellen Szene, all oder ein Gruppenname.
`order`	Liste	`tour`	Reihenfolge der Szenen: wie in der Tour-XML oder alphabetisch nach Titel. `tourtitle`
`thumb_size`	Zahl	`120`	Breite der Vorschaubilder in Pixeln (60–240).
`show_visited`	Ja / Nein	`false`	Markiert Szenen, die der Besucher bei diesem Besuch schon gesehen hat.
`prev_next`	Ja / Nein	`false`	Fügt Schaltflächen für die vorherige und die nächste Szene hinzu.
`search`	Ja / Nein	`true`	Zeigt die Suche an.
`search_pois`	Ja / Nein	`true`	Durchsucht auch Hotspots, die als Orte markiert sind, in allen Szenen.
`search_hotkey`	Text	—	Taste, die die Suche öffnet: leer (keine Taste) oder /.
`poi_action`	Liste	`lookat`	Was die Auswahl eines Ortes bewirkt: dorthin blicken, dorthin blicken und seine Klickaktion ausführen oder nur seine Szene öffnen. `lookatlookat_openscene`
`poi_fov`	Zahl	`70`	Blickfeld beim Ausrichten auf einen Ort (10–140).
`blend`	Text	`BLEND(0.6)`	Übergang bei Szenenwechseln durch den Navigator, zum Beispiel BLEND(0.6) oder NOBLEND.
`deeplink`	Liste	`read`	Liest beim Start einen Szenen-Link; readwrite hält zusätzlich die aktuelle Szene in der Seitenadresse. `offreadreadwrite`
`copy_link`	Ja / Nein	`false`	Fügt eine Schaltfläche hinzu, die einen Link zur aktuellen Szene und Blickrichtung kopiert.
`theme`	Liste	`dark`	Dunkles oder helles Farbschema. `darklight`
`accent_color`	Farbe	`#3D8BFF`	Farbe des Rahmens der aktuellen Szene, der aktiven Gruppe und des Fokusrings.
`vr`	Ja / Nein	`true`	Zeigt in VR das VR-Panel; false blendet den Navigator in VR aus.
`debug`	Ja / Nein	`false`	Gibt die Anzahl der Szenen, Gruppen und Orte in der Browser-Konsole aus.
`text_scenes`	Text	`Scenes`	Text „Scenes“ auf Schaltfläche, Überschriften und Dialog; ein <languages>-Schlüssel oder wörtlicher Text.
`text_all`	Text	`All`	Name der Gruppe mit allen Szenen.
`text_other`	Text	`Other`	Name der Gruppe der Szenen ohne Gruppe.
`text_places`	Text	`Places`	Überschrift der Orte in den Suchergebnissen.
`text_search`	Text	`Search scenes and places`	Platzhalter und Beschriftung des Suchfelds.
`text_no_results`	Text	`Nothing found`	Text, der angezeigt und vorgelesen wird, wenn nichts gefunden wurde.
`text_back`	Text	`Back`	Beschriftung der Zurück-Schaltfläche.
`text_close`	Text	`Close`	Beschriftung der Schließen-Schaltfläche.
`text_prev`	Text	`Previous scene`	Beschriftung der Schaltfläche für die vorherige Szene.
`text_next`	Text	`Next scene`	Beschriftung der Schaltfläche für die nächste Szene.
`text_copy_link`	Text	`Copy link`	Beschriftung der Link-kopieren-Schaltfläche.
`text_visited`	Text	`Visited`	Text, den Screenreader für eine besuchte Szene vorlesen.

Beispiel

<include url="plugins/z360_scene_navigator/z360_scene_navigator.xml" />
<layer name="z360_scene_navigator"
       url="plugins/z360_scene_navigator/z360_scene_navigator.js"
       keep="true"
       layout="bar"
       show_visited="true"
       copy_link="true" />

<z360_scene_navigator_group name="rooms" title="Rooms" scenes="scene_room_204,scene_suite" />
<z360_scene_navigator_group name="leisure" title="Leisure" scenes="scene_pool,scene_lounge" />

<scene name="scene_lounge" title="Lounge" ...>
  <hotspot name="piano" ath="-62" atv="7" z360_scene_navigator_poi="Piano" ... />
</scene>

Funktionen

Vier Layouts: Vorschauleiste, Vollbild-Raster, Seitenliste und Auswahlmenü
Menü am unteren Rand mit 44 px großen Schaltflächen auf Smartphones
Verschachtelte Gruppen; eine Szene kann in mehreren Gruppen sein
Suche über Szenen und markierte Hotspots, auch in noch nicht geladenen Szenen
Suche mit Toleranz für Tippfehler und Akzente
VR-Panel mit Gruppen- und Szenenseiten für das krpano-WebVR-Plugin
Sprachen über das <languages>-Element der Tour
Szenen-Links mit Szene und Blickrichtung, optional ohne Aufblitzen der ersten Szene
Link-kopieren-Schaltfläche, Markierung besuchter Szenen, Vor und Zurück
Tastaturbedienung und Beschriftungen für Screenreader
Große Touren: 500 Szenen und 1 000 Orte in etwa 30 ms am Desktop indiziert, in unter 0,2 s mit einem 4× langsameren Prozessor
Verschlüsselte Plugin-Dateien, jede Einstellung als XML-Attribut