Dies ist eine Demonstration der AJAX-ZOOM API-Methoden, die sich mit Hotspots befassen. Daher ist es nur für Entwickler sinnvoll!

Sie können Stellen in Bildern mit interaktiven Markern (Hotspots) mittels der API-Methode $.fn.axZm.createNewHotspot versehen, indem Sie auf einen Punkt im AJAX-ZOOM-Viewer klicken. Dies sowohl im gezoomten, als auch nicht gezoomten Zustand. Zusätzlich können Sie einen Titel und eine Beschreibung für diese Markierungen definieren. Alle Daten wie die Koordinaten der Hotspots und der Text sind in einem externen JavaScript-Objekt vorhanden, das alle Änderungen aufzeichnet.

In diesem Beispiel wird das Datenobjekt in der "virtuellen Konsole" als JSON gedruckt. Die Ausgabe wird aktualisiert, wenn sich die Daten ändern. Sie können diese Daten in Ihrer Anwendung speichern oder etwas anderes damit tun. Beispielsweise können Sie es per PostMessage an einen anderen Client senden.

Alle Codes haben Inline-Kommentare. Als Entwickler werden Sie daher diese schnell anpassen können. In der Dokumentation finden Sie zusätzliche Informationen zu allen in diesem Beispielcode vorhandenen API-Methoden.

Dies ist eine der fortschrittlichsten Zooms beim Hover Erweiterungen mit optionalen 360-Grad Produktansichten, mehrstufigen 3D-Produktansichten, Videos, 360-Produkt-Touren und Hotspots.

Sie ist adaptiv, responsiv und bietet über 100 Einstellungen. Abhängig von beispielsweise einer Einstellung, wird die Erweiterung auf mobilen Geräten als Bildslider und auf Desktops als Mouseover Zoom angezeigt.

Die Bilder im Zoom-Fenster sowie die Vorschaubilder sind nicht die ursprünglichen Quellbilder mit hoher Auflösung. Die hochauflösenden Bilder werden erst angezeigt, wenn der Benutzer auf das Vorschaubild klickt. Bei Vollbild- oder je nach Einstellung innerhalb der responsiven modalen Box, wird das Originalbild durch den AJAX-ZOOM Viewer dargestellt. In dieser erweiterten Ansicht ist es weiterhin möglich, zwischen den Bildern und anderen Medientypen zu blättern.

Die Mediengalerie ist optional und kann vertikal oder horizontal platziert werden. In der Standardeinstellung, bestimmt die Erweiterung die am besten passende Position aus zwei möglichen automatisch. Eine fixierte Position ist natürlich auch möglich.

Wir integrieren diese Erweiterung in alle unsere Module für die Shopping Software. Sie ersetzt den Standard Bild-Viewer auf den Produktdetailseiten. Je nach Status der Modulentwicklung können Sie auch festlegen, dass der Viewer z.B. in einem Tab und nur für 360 Produktansichten angezeigt wird.

In Beispiel32 erfahren Sie mehr über subtile Unterschiede, die zusammen genommen den großen Unterschied dieser Erweiterung zu herkömmlichen Skripten ausmachen. In dem Beispiel können Sie auch zwischen einigen interessanten Optionen wechseln und die Änderungen sofort sehen. Am Ende dieser Seite finden Sie die vollständige Dokumentation und einige Beispielcodes.

Wenn Sie die Option "axZmMode" der Hover-Zoom Erweiterung aktivieren, funktioniert sie wie die meisten anderen AJAX-ZOOM-Beispiele. Der Zoom Viewer mit dem tiefen Zoom und Bildkacheln-Technologie wird ohne Umwege angezeigt. Benutzer können mit dem Mausrad ein- und auszoomen oder auf Touch-Geräten mit zwei Fingern zoomen.

Wir haben diese Option zur der Hover-Zoom Erweiterung hinzugefügt, da sie bereits samt allen Optionen in mehreren AJAX-ZOOM E-Commerce-Modulen integriert ist. Es machte einfach keinen Sinn, ein anderes Beispiel zu implementieren und verschiedene Konfigurationsoptionen im Backend bereitzustellen.

Einige Optionen der Hover-Zoom Erweiterung, wie z.B. die Objektgalerie oder die Observation des Seitenverhältnisses, sind jedoch immer noch funktional und nützlich. Dies rechtfertigt völlig den kleinen Overhead im Vergleich zu der reinen AJAX-ZOOM Implementierung.

Integration der AJAX-ZOOM Mouseover-Erweiterung in fiktive Produktdetailseite mit Variantenauswahl. Die Variantenauswahl für Farben ist der funktionierende Teil auf dieser Produktdetailseite. Sie soll zeigen, dass man die Erweiterung an jegliche Konstellationen der Produkt Variationen anschließen kann. Auch hier können Sie einige wichtige Konfigurationseinstellungen ändern, die sofort wirksam werden.

Integration der AJAX-ZOOM Mouseover-Erweiterung innerhalb eines modalen APPs Containers. Die Erweiterung wird beim Klicken geöffnet und lädt als erstes ein definierbares Element in die Galerie.

Mit dem Hotspot-Editor können Sie auf einfachen Bildern, sowie 360 / 3D Produktansichten anklickbare bzw. anderweitig interaktive Markierungen setzen. Durch den Editor werden die Bilder nicht verändert. Sie können also jederzeit neue Hotspots erstellen und die vorhandene löschen.

Standardmäßig speichert der Editor die Daten für Hotspots in eine JavaScript Datei. Sie können dann diese Datei in jedem AJAX-ZOOM Beispiel laden. In den Erweiterungen von AJAX-ZOOM finden Sie meistens eine Option, mit der Sie den Pfad zu der Datei definieren können. Je nach Erweiterung können Sie auch den Code auch aus der Hotspot-Datei oder direkt aus dem Editor in den Wert dieser Option kopieren. Jedenfalls sollte das Laden von Hotspots, die mit diesem Editor erstellt wurden, nicht problematisch sein.

Alternativ zum Speichern der Hotspots in einer JavaScript-Datei können Sie den Editor so einstellen, dass die Daten von jeglicher Quelle abgerufen und darin gespeichert werden, z.B. in eine Datenbank. In unseren E-Commerce Modulen, wo dieser Editor ein Teil der Administratoroberfläche ist, werden die Daten ebenfalls in eine Datenbank gespeichert. Hier erfahren Sie mehr darüber.

Derzeit bietet der Editor zwei Arten von Hotspots: einen regulären Punkt und einen rechteckigen Bereich. Rechteckbereiche werden beim Zoomen synchron vergrößert. In einer der zukünftigen Version planen wir auch Polygone für Hotspot-Bereiche zu implementieren. Die Positionierung der Hotspots erfolgt spielerisch per Drag & Drop.

Der Editor bietet für Hotspots verschiedene Interaktionen wie modale Boxen mit zusätzlichem Inhalt an. Es gibt auch verschiedene Labels bzw. Beschriftungen und Verbindungslinien dazwischen. Neben diesen integrierten Funktionen können Sie Ihre benutzerdefinierten JavaScript-Funktionen beim Klick ausführen lassen.

Dieser Hotspot-Editor basiert ausschließlich auf den öffentlichen API-Methoden. Daher wird dieser Editor nicht unbedingt benötigt, um Hotspots auf 360-Spins oder normalen Bildern anzuzeigen. Sie können Hotspots aus anderen Datenquellen dynamisch erzeugen und wieder entfernen. Alle API-Methoden und Eigenschaftstypen des Hotspot-Datenobjekts sind dokumentiert, wobei dies natürlich etwas für Entwickler ist. Als normaler Benutzer sollten Sie diesen Editor verwenden oder von ihren technischen Mitarbeitern den Editor in Ihren Workflow integrieren lassen.

Sauberes (ohne zu viel redundanten Code) Beispiel mit einem 360-Grad-Produktspin und extra übermäßiger Nutzung von Hotspots.

Es gibt keinen großen Unterschied zwischen anderen 360-Grad-Spin Implementierungen, mit der Ausnahme, dass Hotspots mithilfe der $.fn.axZm.loadHotspotsFromJsFile Methode im AJAX-ZOOM onLoad Ereignis geladen werden. Der zweite Unterschied besteht darin, dass dieses Beispiel über zusätzliche Elemente der Benutzeroberfläche verfügt. Es gibt eine Umschalttaste für Wiedergabe / Pause und Hotspots Ein / Aus Tasten. In dem Beispiel werden die Schaltflächen per JavaScript definiert.

Diese Hotspots im Beispiel wurden mit dem Hotspot-Editor erstellt.

Ganzseitige 360-Grad-Produktspin Ansicht mit Hotspots. In diesem Beispiel wird der Viewer beim Laden geöffnet und deckt das gesamte Browserfenster ab. Der Benutzer kann ihn weiter auf die Vollbildansicht ausdehnen.

Wenn Sie diesen 360-Viewer mit Hotspots integrieren möchten, jedoch nur eingeschränkten Zugriff auf das Frontend haben, können Sie ihn mithilfe eines responsiven Iframe-Elements integrieren. Der Viewer stellt sich automatisch auf die Größe des Iframes ein.

Eine 360 Grad Produktanimation mit zusätzlichen hotspots, welche in ein container mit variabler Höhe und Breite geladen ist.

Diese Demo bezieht sich direkt auf die AJAX-ZOOM Hotspots Funktionalität. Die Aufgabe bestand darin, ein Beispiel mit der Möglichkeit zu erstellen, Teile eines Bildes aus Daten in externen Quellen hervorzuheben. Bei dieser speziellen Implementierung handelt es sich bei den Daten um ein OCR-Schema, das in XML-Dateien gespeichert wird. Einige OCR-Software bietet die Möglichkeit, Koordinaten (x1, y1, x2 und y2) der erkannten Wörter in ihrem Schema zu speichern. Diese Koordinaten sind für AJAX-ZOOM ausreichend, um mit Hilfe der AJAX-ZOOM Hotspot-API Überlagerungen zu erstellen bzw. zu entfernen und zwar unabhängig von dem Ansichtsverhältnis oder Zoomstufe.

In dem Beispiel können die Benutzer im "Autosuggest" Suchfeld nach Wörtern suchen. Die Ergebnisse werden unter dem Suchfeld angezeigt und nach der Seitennummer und Suchnummern gruppiert. Die Benutzeroberfläche im aktuellen Zustand ist ein Proof of Concept. Sie soll lediglich zeigen, dass die Funktionalität vorhanden ist und dass sie funktioniert. Alle Seiten ohne Ergebnisse werden vorübergehend ausgeblendet. Wenn der Benutzer auf eine Nummer klickt, schaltet der Viewer zur entsprechenden Seite und zoomt auf die ausgewählte Stelle. Das gefundene Wort wird hervorgehoben.

Die standardmäßig unterstützten OCR-Schemas sind "hOCR" und "ALTO". Es ist jedoch leicht möglich, die Software an jedes andere Schema anzupassen. Noch besser wäre es, die Daten aus XML-Dateien in einer Datenbank zu speichern und dort nach Übereinstimmungen zu suchen. Das würde die Suche in großen Archiven sehr erleichtern.

Das Wechseln zwischen Bildersets (Bücher, Zeitungen usw.) ist für AJAX-ZOOM API-Methoden kein Problem. Da dieses Beispiel jedoch ein Entwurf ist, endet die Herausarbeitung an diesem Punkt. Ohne weitere Anpassungen ist es für gescannte Schriften mit einer Länge von 100 - 200 Seiten effizient einsetzbar. Generell ist es ein perfektes Softwaretool für Museen, digitale Archive und andere digitale Verlage. Als Entwickler kannst Du diese Demo mit deinem Code erweitern.