Eine Demonstration der AJAX-ZOOM $.fn.axZm.zoomTo API-Methode. Wie der Name vermuten lässt, können Sie mit der Methode in einen bestimmten Bereich des Bildes zoomen. Dies, bei Angabe der Koordinaten x1, y1, x2 und y2.

Mit Hilfe einer anderen Methode, die in diesem Beispiel erläutert wird, können Sie umgekehrt die Koordinaten des vergrößerten Bild-Ansichtsfensters (sichtbarer Bereich) ermitteln.

Das Beispiel zeigt auch, wie Sie Miniaturansichten aus dem Ansichtsfenster des Viewers oder aus anderen Schnittkoordinaten eines Bildes erstellen können.

Dieses Beispiel ist hauptsächlich für Entwickler gedacht, die mit AJAX-ZOOM benutzerdefinierte Funktionen erstellen möchten.

Dies ist ein 360-Beispiel einer Animation, bei der die horizontale Galerie im Gegensatz zu den anderen 360-Ansichten nicht deaktiviert ist.

Normalerweise zeigt die Galerie Miniaturansichten aller 360 Frames, was in den meisten Fällen keinen Sinn macht. Mit einer Filtereinstellung in dieser 360-Ansicht enthält die Galerie jedoch nur einige ausgewählte Miniaturansichten. Wenn der Benutzer auf eine Miniaturansicht klickt, animiert die 360 Grad Ansicht zu diesem Frame.

Auch verwenden wir in diesem Beispiel das $.axZmEmbedResponsive Plugin, um das Seitenverhältnis für den übergeordneten Container des Viewers zu definieren. Das Plugin verhindert, dass der Viewer höher ist als die innere Höhe des Browserfensters. Wenn der übergeordnete Container nicht in das Ansichtsfenster passt, wird die Höhe reduziert. Sonst wird das Seitenverhältnis beibehalten bzw. gesetzt.

Diese konkrete 360-Ansicht ist besonders interessant, weil der 360-Fotograf eher eine Filmtechnik für den fliegenden Kameraeffekt verwendet als eine normale 360-Grad-Fotografie.

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.

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.

AJAX-ZOOM hat eine elementare Fähigkeit, Teile eines Bildes zuzuschneiden und sie zu speichern. Im Beispiel10 gibt es eine Demo dieser grundlegenden Fähigkeit und eine Beschreibung der zugehörigen API-Funktionen. Wenn man diese Funktion mit anderen beeindruckenden AJAX-ZOOM-Fähigkeiten, Erweiterungen und vor allem 360 Ansichten kombiniert, kommt das heraus, was Sie hier sehen können. Wir benennen Projekte immer noch als Beispiele und geben ihnen eine Nummer. Tatsächlich ist dies kein Beispiel, sondern ein hervorragender, voll ausgestatteter Produkt-Tour Konfigurator. Es ist sowohl auf 360 Produktansichten, als auch Bilder anwendbar.

Die Leichtigkeit, mit der praktisch jedermann solche Touren erstellen kann, ist wirklich phänomenal. Mit dem Zuschneidewerkzeug definieren Sie einen Bereich, das von besonderem Interesse ist, und klicken dann auf die Zuschneide Taste. Mehr ist nicht erforderlich. Der Ausschnitt ordnet sich automatisch neben dem Viewer in einer Galerie an, wobei die Reihenfolge der Miniaturansichten in der Galerie während des Prozesses keine Rolle spielt. Die Reihenfolge ist später änderbar.

Wenn der Benutzer in der Frontansicht auf ein Miniaturbild klickt, dreht sich die 360-Ansicht und zoomt auf exakt die Position, die Sie zuvor ausgewählt haben. Für diese synchrone oder sequentielle Animation können Sie aus verschiedenen vordefinierten Effekten wählen.

Wenn Sie eins der Interessensbereichen weiter beschreiben möchten, können Sie dies im selben Editor vornehmen. Nachdem die Animation endet, wird eine Schaltfläche mit dem Titel dieses Bereichs angezeigt. Durch Klicken auf diese Schaltfläche wird ein Überlagerungsfenster mit Ihrer Beschreibung in einer beliebig lokalisierten Sprache geöffnet.

Neben dem einfachen Text, können Sie der Beschreibung ein Video, Bilder und sogar eine andere Instanz des AJAX-ZOOM Viewers mit einer zoombaren Ansicht oder eine weitere 360-Rotationsansicht hinzufügen.

In unseren E-Commerce Modulen finden Sie diesen Produkt Tour Editor bereits integriert und sofort einsatzbereit. Wenn Sie es ein paar Mal verwendet haben, können Sie diese Touren in weniger als einer Minute ohne technischen Wissen erstellen.

Alle Ihre Konfigurationen werden in JSON Format wahlweise in eine JSON Datei oder in die Datenbank via einen Controller abgespeichert. Die eigentliche Frontend Darstellung erfolgt dann über einen der abgeleiteten example35. Sie können aber die 360 Produkttouren auch dem example32 hinzufügen.

Dieses Beispiel ist eine responsive Vorlage zum Präsentieren von 360-Grad-Produkttouren oder hochauflösenden Bildtouren mit adaptiv aktivierter vertikaler oder horizontaler Galerie.

Je nach Bildschirmgröße und Bildschirmproportionen erscheint die Galerie entweder rechts oder unter dem AJAX-ZOOM Viewer.

Verwenden Sie den Produkt-Tour Editor, um diese Touren zu erstellen. Dieses Beispiel benötigt den Ausgabecode dessen, was Sie im Editor erstellt haben.

In diesem Beispiel wird die vertikale Galerie mit Produkttour rechts vom Viewer angezeigt.

In example35, dem Editor für das Erstellen von Produkttouren, können Sie festlegen und beschreiben, welche Teile einer 360-Ansicht, eines einfachen Bildes oder einer Galerie Sie hervorheben möchten. Das Erstellen von Produkttouren ist ein einfach zu verwendender Prozess. Wenn Sie eines unserer Module für Ihre E-Commerce-Lösung verwenden, finden Sie diesen Editor im Backend als einsatzbereit.

Für die manuelle Integration der Produkttour verwenden Sie bitte eines der Beispiele ab 35. Sie können auch example32 dafür verwenden.

Diese Vorlage fügt die horizontale Produkttour Galerie unter dem Viewer hinzu.

Für die manuelle Integration der Produkttour verwenden Sie bitte eines der Beispiele ab 35. Sie können auch example32 dafür verwenden.

Um diese Touren und Daten zu erstellen, die Sie in diesen Beispielen verwenden können, verwenden Sie bitte den Produkttour Editor.

Dies ist ein Beispiel, bei dem für die Produkttouren Galerie mit Miniaturbilder kein Slider verwendet wird. Stattdessen platziert der Code die Miniaturansichten in einen frei definierbaren Container mit freien Layout. Die Miniaturansichten ordnen sich in eine UL > LI HTML-Struktur ein.

Sie können die Miniaturansichten weiter mit adaptiven bzw. responsiven CSS formatieren oder via einem Drittanbietern JavaScript Plugin diese in einen anderen Slider integrieren.

Um die Daten für diese Produkttour zu erstellen, verwenden Sie bitte den Produkttour Editor. Darin wird eine JSON-Datei erzeugt, die Sie in diesem und anderen Beispielen verwenden können.

Dieses Beispiel zeigt eine Produkttour mit Galerie, die in einem responsiven Container mit voller Seitenbreite platziert ist.

Die Größe der Tour wird automatisch angepasst, wenn die Größe des Browserfensters geändert wird. Sie wird nicht angepasst, wenn Sie die Größe des übergeordneten Containers über JavaScript ändern. In diesem Beispiel können Sie testen, wie Sie den Größenänderungsprozess starten und ihn über JavaScript synchronisieren.

Zur Erstellung der für diese Touren erforderlichen Daten verwenden Sie bitte den Produkt-Tour Editor. Es generiert XML-Daten, die Sie dann in diesem oder anderen AJAX-ZOOM-Beispielen verwenden können, mit der Möglichkeit, Produkttouren einzufügen. Neben Beispielen, die mit 35 beginnen, unterstützt die Mouseover Zoom Erweiterung die Produkttouren.

Dieses Beispiel zeigt, wie Sie die AJAX-ZOOM-Produkttour als Vollbild oder Browserfenster von einem Klickereignis aus öffnen können.

Dieses Beispiel ist ein Proof of Concept, in dem mehrere nicht standardmäßige AJAX-ZOOM Optionen, API und Ereignis-Hooks verwendet werden, um einen besonderen 360 Grad Produktviewer zu entwickeln.

Innerhalb des responsiven Layouts wird der Viewer links vom Container mit den Beschreibung und Farbvarianten des Produkts angezeigt. Die Zoom-Funktion ist deaktiviert. Wenn der User auf den Viewer klickt, wird anstelle des Zoomens der 360 Viewer in einem Modalen Fenster geöffnet. In diesem Fenster wird die 360-Ansicht automatisch soweit vergrößert, dass die gesamte Fläche des Fensters abgedeckt ist. Das Ergebnis ähnelt der background-size: cover in CSS.

Am unteren Rand der Modal Box befindet sich eine halbtransparente Überlagerung mit zusätzlichen Text- und Oberflächenelementen. Neben den gleichen Schaltflächen zum Wechseln zwischen den Variationen des Produkts, erzeugt der Code beschriftete Schaltflächen mit Bezeichnungen der Bereiche in der Produktdrehung, die vom besonderen Interesse ist. Beim Klick dreht und zoomt der Viewer die Ansicht zu der ausgewählten Stelle.

Sie oben beschriebene Funktionalität ähnelt der AJAX-ZOOM 360-Produkttour. Jedoch wird hier lediglich der benutzerdefinierte Code und die AJAX-ZOOM $.fn.axZm.spinTo API-Methode verwendet. Es gibt keine Miniaturbildgalerie und es werden keine anderen Erweiterungen verwendet. Dementsprechend sind keine Daten aus dem Produkt-Tour Editor erforderlich! Wenn jedoch Daten aus der Produkttour verfügbar wären, könnten Sie als Entwickler ohne Zweifel den benutzerdefinierten Code dieses Beispiels anpassen, um ihn für das Beispiel zu interpretieren.

Der gesamte Code, mit dem diese Funktionalität realisiert wird, ist in dem Quellcode dieses Beispiels zu finden. Der Code ist kommentiert, sodass Sie als Entwickler ihn schnell verstehen können und an Ihre Anforderungen anpassen.