Compare Views

So funktioniert es.

Schritt 1 von 7 **Zwei Momente, eine Ansicht** Ein Trenner zwischen der klaren Aufnahme und der Aufnahme im Morgennebel desselben Aussichtspunkts, beide in genau derselben Ansicht.

Den Trenner ziehen — Schritt 1 von 7 **Zwei Momente, eine Ansicht** Ein Trenner zwischen der klaren Aufnahme und der Aufnahme im Morgennebel desselben Aussichtspunkts, beide in genau derselben Ansicht.

Baufortschritt, eine Renovierung, virtuelles Home Staging oder Tag und Nacht: Derselbe Ort zu verschiedenen Zeiten erzählt eine Geschichte, die zwei getrennte Szenen nicht erzählen können. Compare Views legt eine zweite Aufnahme über die aktuelle Szene. Besucher ziehen einen Trenner oder sehen am Computer beide Aufnahmen nebeneinander, und beide drehen und zoomen immer gemeinsam. Sie fassen die Szenen eines Orts in Ihrer Tour-XML zu einer Gruppe zusammen, richten sie einmal mit dem Kalibrierungsmodus aus, und jede Einstellung ist ein Attribut eines einzigen XML-Elements. Die Demo vergleicht drei Wetteraufnahmen eines Aussichtspunkts.

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 hinzu.
2
Aufnahmen gruppieren

Tragen Sie die Szenen desselben Orts in ein group-Element ein, zum Beispiel die Bauphasen eines Raums.
3
Einmal ausrichten

Schalten Sie calibrate="true" ein, drehen Sie jede Aufnahme, bis sie passt, und kopieren Sie die ausgegebene Zeile in Ihre Tour-XML.

Warum es den Unterschied macht.

Die Veränderung an einem Ort zeigen

Vorher und nachher, Bauphasen, eine Renovierung oder ein leerer und ein eingerichteter Raum: Besucher vergleichen genau dort, wo es passiert ist.

Immer dieselbe Ansicht

Beide Aufnahmen drehen und zoomen in jedem Bild gemeinsam, auf beiden Seiten des Trenners und in der geteilten Ansicht.

Passend auf jedem Bildschirm

Ein Trenner für Maus, Touch und Tastatur, eine geteilte Ansicht am Computer und ein leichterer Schieberegler auf Smartphones und Tablets.

Screenshots.

Demo ausprobieren

**Desktop** Der Schieberegler in der Demo-Tour: links die klare Aufnahme, rechts die Aufnahme im Morgennebel, in derselben Ansicht.

**Smartphone** Der Schieberegler auf einem Smartphone mit dem runden Griff und den Beschriftungen unten.

**Detail** Die geteilte Ansicht am Computer: beide Aufnahmen nebeneinander, jede auf dieselbe Ansicht zentriert.

Einstellungen.

Als Attribute in der XML-Datei Ihrer Tour festlegen.

Einstellung	Typ	Standard	Beschreibung
`active`	Ja / Nein	`true`	Schaltet Compare Views zur Laufzeit ein oder aus (Standard true).
`modes`	Liste	`slider\|split`	Ansichten, die der Besucher wählen kann, in der Reihenfolge der Schaltflächen: slider\|split (Standard), split\|slider, slider oder split. Die geteilte Ansicht erscheint nur auf breiten Computerbildschirmen. `slider\|splitsplit\|sliderslidersplit`
`start_mode`	Liste	`off`	Öffnet den Vergleich, sobald eine Szene einer Gruppe betreten wird: off (Standard, nur die Compare-Schaltfläche), slider oder split. `offslidersplit`
`slider_position`	Zahl	`0.5`	Startposition des Trenners als Anteil der Breite vom linken Rand (0.05–0.95, Standard 0.5).
`labels`	Ja / Nein	`true`	Zeigt die Beschriftungen der Zustände auf beiden Seiten (Standard true).
`slot`	Liste	`top-center`	Platz der Compare-Schaltfläche und der Leiste: top-center (Standard) oder bottom-center. `top-centerbottom-center`
`offset`	Zahl	`16`	Abstand der Schaltfläche und der Leiste vom Rand in Pixeln (0–200, Standard 16).
`theme`	Liste	`dark`	Dunkles (Standard) oder helles Farbschema. `darklight`
`accent_color`	Farbe	`#3D8BFF`	Farbe des Compare-Symbols, der gewählten Ansicht und des Fokusrahmens (Standard #3D8BFF).
`transition`	Ja / Nein	`true`	Öffnet, schließt und ändert den Vergleich mit kurzen, weichen Übergängen; false ändert ihn sofort. Besucher mit aktivierter reduzierter Bewegung sehen nie eine Bewegung.
`transition_duration`	Zahl	`280`	Dauer der Übergänge in Millisekunden (100–1000, Standard 280).
`mobile_quality`	Zahl	`0.75`	Darstellungsgröße des verglichenen Bilds auf Smartphones und Tablets (0.5–1, Standard 0.75); 1 ist am schärfsten, braucht aber mehr Grafikleistung.
`calibrate`	Ja / Nein	`false`	Modus für Ersteller: eine Leiste, die die verglichene Aufnahme in Schritten von 0,1° dreht und die fertige Zustandszeile ausgibt; in einer veröffentlichten Tour nie eingeschaltet lassen (Standard false).
`debug`	Ja / Nein	`false`	Gibt die Anzahl der Gruppen und Zustände in der Browser-Konsole aus (Standard false).
`text_compare`	Text	`Compare`	Beschriftung der Compare-Schaltfläche (Standard „Compare“); ein <languages>-Schlüssel oder Text.
`text_slider`	Text	`Slider`	Beschriftung der Slider-Schaltfläche (Standard „Slider“).
`text_split`	Text	`Split`	Beschriftung der Split-Schaltfläche (Standard „Split“).
`text_close`	Text	`Close`	Beschriftung der Schließen-Schaltfläche (Standard „Close“).
`text_divider`	Text	`Divider`	Screenreader-Name des Trenners (Standard „Divider“).
`text_states`	Text	`States`	Tooltip der rechten Beschriftung, die den nächsten Zustand zeigt (Standard „States“).

Beispiel

<layer name="z360_compare_views"
       url="plugins/z360_compare_views/z360_compare_views.js"
       keep="true"
       start_mode="slider" />

<z360_compare_views_group name="kitchen" title="Kitchen"
                          scenes="scene_kitchen_before,scene_kitchen_after" />
<z360_compare_views_state name="scene_kitchen_before" label="Before" />
<z360_compare_views_state name="scene_kitchen_after" label="After" hoffset="12.5" />

Funktionen

Vorher-nachher-Schieberegler mit verschiebbarem Trenner über der Tour
Geteilte Ansicht nebeneinander auf breiten Computerbildschirmen
Gruppen mit beliebig vielen Zuständen pro Ort; ein Tippen auf die Beschriftung zeigt den nächsten Zustand
Exakte Synchronisierung von Richtung, Neigung und Zoom in jedem Bild
Richtungsversatz pro Zustand für Aufnahmen, die in verschiedene Richtungen zeigen
Kalibrierungsmodus, der die fertige Zustandszeile ausgibt
Nutzt die Szenen der Tour: keine zweite Tour und kein iframe
Öffnet automatisch oder mit einer Compare-Schaltfläche; blendet sich in VR aus und kommt danach zurück
Leichtere Darstellung des verglichenen Bilds auf Smartphones und Tablets
Weiche Übergänge, ausgeschaltet bei reduzierter Bewegung
Tastaturbedienung und Beschriftungen für Screenreader
Texte in mehreren Sprachen, dunkles und helles Design, Akzentfarbe und CSS-Variablen
Verschlüsselte Plugin-Datei, jede Einstellung als XML-Attribut