Detail Loupe

So funktioniert es.

Schritt 1 von 6 **Ein Foto voller kleiner Details** Eine Karte, ein Plan oder ein Dokument in Ihrer Tour hat Details, die im Popup zu klein zum Lesen sind.

Auf ein Detail zeigen — Schritt 1 von 6 **Ein Foto voller kleiner Details** Eine Karte, ein Plan oder ein Dokument in Ihrer Tour hat Details, die im Popup zu klein zum Lesen sind.

Besucher möchten die kleinen Details der Fotos in Ihren Popups sehen, doch krpano bietet für Bild-Layer keine Lupe. Detail Loupe fügt eine Linse hinzu, die auf dem Desktop der Maus und auf Smartphones und Tablets dem Finger folgt – mit Pinch-Zoom und optionalem hochauflösendem Quellbild. Jede Einstellung ist ein Attribut des Plugin-Elements in Ihrer eigenen Tour-XML; die Plugin-Datei bleibt unverändert.

Installation.

1
Datei kopieren

Kopieren Sie detailloupe.js in den Ordner plugins Ihrer Tour.
2
Plugin-Element einfügen

Fügen Sie Ihrer Tour-XML ein <plugin>-Element hinzu und setzen Sie target auf den Namen des Bild-Layers.
3
Feinabstimmung

Legen Sie Attribute wie zoom, size, shape oder hires fest oder ändern Sie sie während der Tour mit set() und tween().

Warum es den Unterschied macht.

Für Touch gemacht

Die Linse erscheint über dem Finger, damit der Finger sie nicht verdeckt; zwei Finger ändern den Zoom, während das Panorama stillsteht.

Alles in Ihrer XML

Jede Option ist ein Attribut des Plugin-Elements. Mit den Events onshow, onhide und onzoomchange reagiert Ihre Tour mit eigenen Aktionen.

Scharfe Details

Verweisen Sie die Linse auf eine hochauflösende Kopie des Fotos und zeigen Sie Details, die das Popup nicht zeigen kann.

Screenshots.

Demo ausprobieren

**Smartphone** Die Linse über dem Finger auf einem Smartphone.

**Detail** Abgerundete Linse mit orangem Rahmen.

Einstellungen.

Als Attribute in der XML-Datei Ihrer Tour festlegen.

Einstellung	Typ	Standard	Beschreibung
`target`	Text	—	Name des Bild-Layers, den die Linse vergrößert, z. B. showcase_photo.
`zoom`	Zahl	`2.5`	Vergrößerung relativ zum angezeigten Foto, z. B. 2.5. Enthält immer den aktuellen Zoom.
`min_zoom`	Zahl	`1.5`	Kleinster Zoom, den Pinch, Mausrad, Tasten und set() erreichen.
`max_zoom`	Zahl	`8`	Größter Zoom, den Pinch, Mausrad, Tasten und set() erreichen.
`size`	Zahl	`180`	Breite und Höhe der Linse in Pixeln, inklusive Rahmen.
`shape`	Liste	`circle`	Form der Linse: circle (rund), rounded (abgerundet) oder square (eckig). `circleroundedsquare`
`border`	Zahl	`3`	Rahmenbreite in Pixeln; 0 entfernt den Rahmen.
`border_color`	Farbe	`0xFFFFFF`	Rahmenfarbe, z. B. 0xFF9F0A.
`shadow`	Ja / Nein	`true`	Schatten unter der Linse.
`background`	Farbe	`0x000000`	Farbe in der Linse jenseits der Fotoränder oder transparent.
`touch_offset`	Text	`auto`	Abstand in Pixeln zwischen Finger und Linsenmitte; auto platziert die Linse knapp über dem Finger.
`trigger`	Liste	`hover`	Maus und Stift: Linse beim Überfahren oder nur bei gedrückter Taste zeigen. `hoverpress`
`lens_cursor`	Liste	`crosshair`	Mauszeiger über dem Foto; keep behält den Zeiger des Layers. `crosshairzoom-innonekeep`
`pinch`	Ja / Nein	`true`	Zwei Finger ändern den Zoom.
`wheel`	Ja / Nein	`true`	Das Mausrad ändert den Zoom der sichtbaren Linse, statt das Panorama zu zoomen.
`keyboard`	Ja / Nein	`true`	Das Foto kann den Tastaturfokus erhalten; Pfeiltasten bewegen die Linse, + und - zoomen.
`animation`	Ja / Nein	`true`	Kurzes Einblenden der Linse; immer aus, wenn der Besucher reduzierte Bewegung bevorzugt.
`hires`	Text	—	Suffix einer hochauflösenden Kopie, z. B. lädt _hd die Datei showcase_hd.jpg für showcase.jpg.
`hires_url`	Text	—	Pfad einer hochauflösenden Kopie mit anderem Namen; hat Vorrang vor hires.
`lens_enabled`	Ja / Nein	`true`	false schaltet die Linse aus, das Foto verhält sich dann wie ohne Plugin (bis auf den Mauszeiger); true schaltet sie wieder ein.
`lens_visible`	Ja / Nein	`false`	Nur lesbar: true, solange die Linse sichtbar ist.
`onshow`	Text	—	Aktionen, wenn die Linse erscheint.
`onhide`	Text	—	Aktionen, wenn die Linse verschwindet.
`onzoomchange`	Text	—	Aktionen bei jeder Zoomänderung; get(zoom) liefert den neuen Zoom.

Beispiel

<plugin name="loupe_showcase"
        url="%CURRENTXML%/plugins/detailloupe.js"
        keep="true"
        target="showcase_photo"
        zoom="3" size="220" shape="rounded"
        hires="_hd"
        onzoomchange="trace('zoom=', get(zoom));" />

Funktionen

Eine Linse für Maus, Stift und Touch (Pointer Events)
Linse über dem Finger, am Bildschirmrand daneben
Zoom per Pinch, Mausrad und Tastatur – das Panorama bewegt sich nicht
Optionales hochauflösendes Quellbild (Dateisuffix oder eigene URL)
Runde, abgerundete oder eckige Linse; Größe, Rahmen, Schatten und Farben
Mehrere Fotos mit eigenen Einstellungen; wechselnde Bild-URLs, Popups, die sich öffnen und schließen, crop
Jede Einstellung zur Laufzeit mit set() und tween() änderbar
Events onshow, onhide und onzoomchange für eigene Aktionen
Tastaturbedienung und Unterstützung für reduzierte Bewegung
Eine Datei für krpano 1.23.2–1.24, registrierte und nicht registrierte Viewer
Grenzen: nur Bild-Layer (keine Hotspots, kein VR, keine gedrehten Layer); Viewer mit der Protect-Tool-Option -pplg werden nicht unterstützt

Im Lieferumfang

plugins/detailloupe.js – das Plugin für krpano 1.23.2–1.24
Demo-Tour mit einem Panorama und zwei Fotos (fügen Sie Ihren eigenen krpano-Viewer hinzu)
Handbuch (Englisch)