Info Cards

So funktioniert es.

Schritt 1 von 6 **Eine Markierung in der Tour** Eine blaue i-Markierung in der Museumsszene zeigt, dass es etwas zu lesen gibt.

Die Karte öffnet sich neben dem Panorama — Schritt 1 von 6 **Eine Markierung in der Tour** Eine blaue i-Markierung in der Museumsszene zeigt, dass es etwas zu lesen gibt.

Touren müssen Besuchern etwas erzählen: was ein Raum bietet, was ein Exponat ist, wann man kommen und wo man buchen kann. Info Cards zeigt diese Inhalte in Karten, die sich von jedem Hotspot aus öffnen – auf breiten Bildschirmen neben dem Panorama, auf Smartphones als Sheet, sodass Besucher beim Lesen weiter umherschauen. Sie schreiben jede Karte einmal als <data>-Element mit Titel, formatiertem Text, einem Foto oder Video, Fakten und bis zu drei Buttons; jede Einstellung ist ein Attribut eines XML-Elements.

Installation.

1
Einen Ordner kopieren

Legen Sie den verschlüsselten Plugin-Ordner in Ihre Tour und fügen Sie ein Plugin-Element in Ihr Tour-XML ein.
2
Karten schreiben

Beschreiben Sie Titel, Text, ein Foto oder Video, Fakten und Buttons in <data>-Elementen, bei Bedarf mit Übersetzungen.
3
Hotspots markieren

Geben Sie einem beliebigen Hotspot das Attribut z360_info_panels_card mit der Karten-ID; Layout, Farben und Texte wählen Sie mit Attributen und sieben CSS-Variablen.

Warum es den Unterschied macht.

Lesen, ohne die Tour zu verlassen

Auf breiten Bildschirmen öffnet sich die Karte neben dem Panorama, das bedienbar bleibt; auf Smartphones als Sheet, das Besucher hochziehen oder wegwischen.

Eine Karte für jeden Bildschirm

Sie schreiben eine Karte einmal; Info Cards wählt Seitenpanel, Bottom Sheet, Drawer oder zentriertes Fenster passend zum Bildschirm und behält ein laufendes Video beim Drehen des Smartphones.

Fremde Inhalte erst nach einem Klick

YouTube, Vimeo und eingebettete Seiten laden erst nach dem Klick des Besuchers und zeigen vorher Ihr eigenes Vorschaubild. Das ist eine technische Sperre, keine Rechtskonformität: Ihre Pflichten als Seitenbetreiber bleiben bei Ihnen.

Screenshots.

Demo ausprobieren

**Desktop** Die Walkarte im Seitenpanel neben der Museumstour: Foto, Untertitel, Text und Fakten.

**Smartphone** Die Videokarte als Bottom Sheet auf dem Smartphone, mit eigener Wiedergabe-, Stummschalt- und Positionssteuerung.

**Detail** Die Willkommenskarte als zentriertes Fenster mit Öffnungszeiten und dem Button „Plan your visit“.

Einstellungen.

Als Attribute in der XML-Datei Ihrer Tour festlegen.

Einstellung	Typ	Standard	Beschreibung
`active`	Ja / Nein	`true`	Schaltet Info Cards ein oder aus; false schließt die Karte und entfernt alle Teile des Plugins aus der Tour.
`layout`	Liste	`auto`	auto wählt Seitenpanel, Bottom Sheet oder Drawer passend zum Bildschirm; modal öffnet immer ein zentriertes Fenster. `automodal`
`slot`	Liste	`middle-right`	Bildschirmseite des Seitenpanels auf breiten Bildschirmen. `middle-rightmiddle-left`
`panel_width`	Zahl	`380`	Breite des Seitenpanels in Pixeln (280–600).
`offset`	Zahl	`16`	Abstand des Seitenpanels vom Bildschirmrand und von anderen z360-Elementen in Pixeln (0–200).
`theme`	Liste	`dark`	Dunkle oder helle Farben der Karten. `darklight`
`accent_color`	Farbe	`#3D8BFF`	Farbe des Haupt-Buttons, der Links, des Fokusrahmens und des Videofortschritts.
`startup_card`	Text	—	ID einer Karte, die sich beim Start der Tour als zentriertes Fenster öffnet; leer für keine.
`startup_once`	Ja / Nein	`true`	Zeigt die Startkarte nur beim ersten Besuch in diesem Browser.
`close_on_scene_change`	Ja / Nein	`true`	Schließt die offene Karte, wenn die Tour die Szene wechselt – außer der Button der Karte selbst hat gewechselt.
`deeplink`	Liste	`read`	read öffnet eine Karte über einen Link wie tour.html?z360-info-panels=whale; off ignoriert solche Links. `offread`
`copy_link`	Ja / Nein	`false`	Zeigt im Kartenkopf einen Button zum Kopieren des Links.
`pause_tour`	Ja / Nein	`true`	Pausiert Tour-Sounds und Tour-Videos, solange Video oder eingebetteter Inhalt der Karte läuft, und setzt danach genau diese fort.
`vr`	Ja / Nein	`true`	true zeigt die Karte in VR als Panel in der Szene; false schließt sie in VR und öffnet sie nach VR wieder.
`debug`	Ja / Nein	`false`	Gibt die Anzahl der Karten und verbundenen Hotspots sowie weitere Details in der Browserkonsole aus.
`text_card`	Text	`Information`	Name einer Karte ohne Titel für Screenreader.
`text_close`	Text	`Close`	Beschriftung des Schließen-Buttons.
`text_copy_link`	Text	`Copy link`	Beschriftung des Buttons zum Kopieren des Links.
`text_gallery`	Text	`Gallery`	Beschriftung des Galerie-Buttons; die Anzahl der Elemente wird ergänzt.
`text_load_content`	Text	`Load content`	Button, der ein YouTube- oder Vimeo-Video oder eine eingebettete Seite lädt.
`text_open_new_window`	Text	`Open in new window`	Link unter YouTube-, Vimeo- und eingebetteten Inhalten.
`text_embed_failed`	Text	`This content could not be loaded here.`	Meldung, wenn eine eingebettete Seite nach 8 Sekunden nicht geladen ist.
`text_play`	Text	`Play`	Beschriftung des Wiedergabe-Buttons des Videos.
`text_mute`	Text	`Mute`	Beschriftung des Stummschalt-Buttons des Videos.
`text_position`	Text	`Playback position`	Beschriftung des Positionsreglers des Videos.
`text_vr_unavailable`	Text	`Available outside VR`	Zeile im VR-Panel für ein Video oder eine eingebettete Seite.

Beispiel

<plugin name="z360_info_panels"
        url="plugins/z360_info_panels/z360_info_panels.js"
        keep="true"
        startup_card="welcome" />

<data name="z360_info_panels_card_whale" title="Whale skeleton" subtitle="Hall of mammals"
      image_url="media/whale.jpg" image_alt="Ribs and skull of a whale skeleton"
      facts="Length|about 20 m;Group|baleen whales"
      cta1_label="Show in the hall" cta1_url="scene:scene_hall_of_mammals"><![CDATA[
  <p>You are standing <b>inside</b> the skeleton.</p>
]]></data>

<scene name="scene_whale_skeleton" ...>
  <hotspot name="hs_whale" type="text" html="i" ath="-90" atv="-12"
           z360_info_panels_card="whale" />
</scene>

Funktionen

Seitenpanel auf breiten Bildschirmen: Panorama, Hotspots und andere Plugins bleiben bedienbar
Bottom Sheet am Smartphone im Hochformat, Drawer im Querformat; beim Drehen bleiben Karte und laufendes Video erhalten
Zentrierte Willkommenskarte beim Start der Tour, einmal pro Browser
Titel, Untertitel, formatierter Text, Faktenliste und bis zu drei Buttons pro Karte
Ein Foto, MP4- oder WebM-Video mit eigener Steuerung, YouTube- oder Vimeo-Video oder eine eingebettete Seite pro Karte
YouTube, Vimeo und eingebettete Seiten laden erst nach dem Klick des Besuchers, vorher mit Ihrem eigenen Vorschaubild
Buttons öffnen eine Webseite, E-Mail, eine Telefonnummer, eine andere Karte, eine Szene mit Blickrichtung oder Ihre eigene krpano-Aktion
Links, die die Tour mit einer Karte öffnen: tour.html?z360-info-panels=<Karte>
Pausiert Tour-Sounds und Tour-Videos, solange das Video der Karte läuft, und setzt nur fort, was es pausiert hat
Kartentexte in mehreren Sprachen, ohne Karten zu duplizieren
Galerie-Button, der Media Gallery öffnet, wenn beide Plugins in der Tour sind
VR-Karte in der Szene mit dem krpano-WebVR-Plugin — getestet in der VR-Emulation des Browsers, noch nicht auf VR-Brillen
Tastaturbedienung, Fokusführung und Beschriftungen für Screenreader
Dunkles und helles Theme, Akzentfarbe und sieben CSS-Variablen
Events für Ihr Tour-XML; verschlüsselte Plugin-Dateien, jede Einstellung als XML-Attribut

Im Lieferumfang

plugins/z360_info_panels/z360_info_panels.js (verschlüsselt)
plugins/z360_info_panels/z360_info_panels.xml (verschlüsselt, optional: Kartenlinks ohne vorherige Anzeige der Startszene)
Handbuch (Englisch)