Media Gallery

So funktioniert es.

Schritt 1 von 6 **Eine Markierung in der Tour** Eine Kamera-Markierung in der Museumsszene zeigt, dass es mehr zu sehen gibt.

Ein Klick öffnet die Galerie — Schritt 1 von 6 **Eine Markierung in der Tour** Eine Kamera-Markierung in der Museumsszene zeigt, dass es mehr zu sehen gibt.

Hotspots, die ein Foto in einem neuen Browser-Tab öffnen, führen Besucher aus der Tour hinaus. Media Gallery öffnet Fotos, MP4-Videos sowie YouTube- und Vimeo-Videos in einer Lightbox über dem Panorama: Besucher zoomen in Details, wischen auf dem Smartphone weiter und kehren beim Schließen zur selben Ansicht zurück. Tour-Sounds, Tour-Videos und die automatische Drehung pausieren, solange die Galerie offen ist, 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 plugin-Element hinzu.
2
Galerien beschreiben

Tragen Sie Fotos, Videos, Bildunterschriften und Übersetzungen in eine JSON-Datei oder in <data>-Elemente Ihrer Tour-XML ein.
3
Von jedem Hotspot öffnen

Rufen Sie plugin[z360_media_gallery].open() in einem Hotspot oder Ihrer eigenen Skin-Schaltfläche auf; Aussehen und Verhalten wählen Sie mit Attributen und sechs CSS-Variablen.

Warum es den Unterschied macht.

Besucher bleiben in der Tour

Die Galerie öffnet sich über dem Panorama und schließt zur selben Ansicht; Tour-Sounds, Tour-Videos und die automatische Drehung pausieren und laufen danach weiter.

Details, die man lesen kann

Zoom bis 4× mit Mausrad, Doppelklick, Tastatur oder zwei Fingern; eine hochauflösende Datei wird erst beim Hineinzoomen geladen.

YouTube und Vimeo erst nach einem Klick

YouTube und Vimeo werden erst nach dem Klick des Besuchers geladen, dann im erweiterten Datenschutzmodus von YouTube und mit dem Do-not-track-Parameter von Vimeo. Das ist eine technische Sperre, keine rechtliche Konformität: Ihre Pflichten als Betreiber der Website bleiben bestehen.

Screenshots.

Demo ausprobieren

**Desktop** Die Lightbox über der Museumstour: der Stadtplan von Rom aus dem Jahr 1748 mit Bildunterschrift und Vorschauleiste.

**Smartphone** Die bildschirmfüllende Ansicht auf einem Smartphone.

**Detail** Hineingezoomt in den Stadtplan von Rom: Das Detail stammt aus der hochauflösenden Datei.

Einstellungen.

Als Attribute in der XML-Datei Ihrer Tour festlegen.

Einstellung	Typ	Standard	Beschreibung
`active`	Ja / Nein	`true`	Schaltet die Galerie zur Laufzeit ein oder aus; aus schließt sie und lehnt jedes Öffnen ab (Standard true).
`source`	Text	—	URL einer JSON-Datei mit Galerien, relativ zur ersten XML-Datei der Tour; leer (Standard) nutzt nur <data>-Galerien.
`deeplink`	Liste	`read`	Galerie-Links in der Seitenadresse: off, read (Standard: öffnet beim Start ein verlinktes Foto) oder readwrite (hält zusätzlich das angezeigte Element in der Adresse). `offreadreadwrite`
`close_on_scene_change`	Ja / Nein	`true`	Schließt die Galerie beim Szenenwechsel (Standard true).
`loop`	Ja / Nein	`false`	Nach dem letzten Element folgt wieder das erste (Standard false).
`thumbnails`	Ja / Nein	`true`	Zeigt die Vorschauleiste (Standard true); bei nur einem Element und in Viewern unter 500 px Höhe ist sie ohnehin ausgeblendet.
`zoom`	Ja / Nein	`true`	Zoomen und Verschieben von Fotos bis 4× (Standard true).
`fullscreen`	Liste	`maximize`	Vollbild-Schaltfläche: maximize (Standard, Medien randlos innerhalb des Viewers), browser (Vollbild des Browsers) oder off. `maximizebrowseroff`
`pause_tour`	Ja / Nein	`true`	Pausiert Tour-Sounds, Tour-Videos und die automatische Drehung, solange die Galerie offen ist, und setzt fort, was sie pausiert hat (Standard true).
`theme`	Liste	`dark`	Dunkles (Standard) oder helles Farbschema. `darklight`
`accent_color`	Farbe	`#3D8BFF`	Farbe des Fokusrings, des aktiven Vorschaubilds und der Video-Zustimmungsschaltfläche (Standard #3D8BFF).
`vr`	Ja / Nein	`true`	Zeigt die Galerie in VR als Panel (Standard true); false lehnt das Öffnen der Galerie in VR ab.
`vr_videoplayer`	Text	`%VIEWER%/plugins/videoplayer.js`	Pfad der offiziellen krpano-Datei videoplayer.js für MP4-Elemente in VR (Standard %VIEWER%/plugins/videoplayer.js).
`debug`	Ja / Nein	`false`	Gibt die Anzahl der Galerien und Elemente sowie fehlende Alternativtexte in der Browser-Konsole aus (Standard false).
`text_gallery`	Text	`Gallery`	Name des Galeriefensters für Screenreader, wenn die Galerie keinen Titel hat (Standard „Gallery“); ein <languages>-Schlüssel oder wörtlicher Text.
`text_close`	Text	`Close`	Beschriftung der Schließen-Schaltfläche (Standard „Close“).
`text_prev`	Text	`Previous`	Beschriftung der Zurück-Schaltfläche (Standard „Previous“).
`text_next`	Text	`Next`	Beschriftung der Weiter-Schaltfläche (Standard „Next“).
`text_fullscreen`	Text	`Full screen`	Beschriftung der Vollbild-Schaltfläche (Standard „Full screen“).
`text_counter`	Text	`%1 / %2`	Zähler der Elemente; %1 ist die Position, %2 die Anzahl (Standard „%1 / %2“).
`text_more`	Text	`More`	Schaltfläche, die eine lange Bildunterschrift auf Smartphones aufklappt (Standard „More“).
`text_consent`	Text	`This video is loaded from %1, which may store data in your browser.`	Hinweis, bevor ein YouTube- oder Vimeo-Video geladen wird; %1 ist der Name des Dienstes (Standard „This video is loaded from %1, which may store data in your browser.“).
`text_consent_button`	Text	`Play video`	Schaltfläche, die ein YouTube- oder Vimeo-Video lädt und startet (Standard „Play video“).
`text_load_error`	Text	`This item could not be loaded.`	Wird angezeigt, wenn ein Foto oder Video nicht geladen werden kann (Standard „This item could not be loaded.“).
`text_vr_unavailable`	Text	`This video is available outside VR.`	Wird in VR anstelle von YouTube- und Vimeo-Videos angezeigt (Standard „This video is available outside VR.“).

Beispiel

<plugin name="z360_media_gallery"
        url="plugins/z360_media_gallery/z360_media_gallery.js"
        keep="true"
        source="media/galleries.json"
        theme="dark"
        accent_color="#3D8BFF" />

<scene name="scene_hall" ...>
  <hotspot name="hs_photos" type="text" html="Photos" ath="30" atv="0"
           onclick="plugin[z360_media_gallery].open(rome_1748);" />
</scene>

Funktionen

Fotos, MP4-Videos, YouTube- und Vimeo-Videos in einer Galerie
Lightbox auf breiten Bildschirmen, bildschirmfüllende Ansicht auf Smartphones
Zoomen und Verschieben bis 4× mit Mausrad, Doppelklick oder Doppeltippen, zwei Fingern und Tasten; optional hochauflösende Datei beim Zoomen
Wischen zum nächsten Element, nach unten wischen zum Schließen auf Touchscreens
Vorschauleiste, Bildunterschriften mit Fett, Kursiv und Links, Quellenangaben
Pausiert Tour-Sounds, Tour-Videos und die automatische Drehung und setzt nur fort, was sie pausiert hat
YouTube und Vimeo werden erst nach dem Klick des Besuchers geladen (erweiterter Datenschutzmodus / Do-not-track)
Galerien aus einer JSON-Datei oder aus <data>-Elementen, Texte in mehreren Sprachen
Links, die eine Galerie bei einem bestimmten Foto öffnen: ?z360-media-gallery=galerie/element
VR-Panel für Bilder mit dem krpano-WebVR-Plugin
MP4-Videos im VR-Panel über den offiziellen krpano-Videoplayer
Tastaturbedienung, Fokus bleibt in der Galerie, Ansagen für Screenreader
Aktionen, schreibgeschützte Statusattribute und Events für Ihre Tour-XML
Verschlüsselte Plugin-Datei, jede Einstellung als XML-Attribut