Release date: February 7th, 2019
Current version: 5.3.10
Change log

AJAX-ZOOM Demo

AJAX-ZOOM Beispiele mit 360 Viewer, ohne gemixte Inhalte oder Galerien

example3

Öffnen des AJAX-ZOOM Viewers in einer Lightbox / Modal-Fenster über einen Link (Klick Ereignis) als AJAX aufgerufener Inhalt.

Der Inhalt kann eine 360-Grad-Produktdrehung, eine 3D-Produktansicht, eine Galerie oder ein einfaches Bild sein. Das Beispiel verwendet Fancybox und Colorbox, um die Vorgehensweise zu veranschaulichen.

example13

Integration des AJAX-ZOOM Viewers über das Iframe HTML Element. Dies ist der einfachste Weg, AJAX-ZOOM überall einzubinden.

Sie können beliebig viele Instanzen auf einer Seite platzieren. Vollbild-Ansichten funktionieren auf Desktop- und mobilen Geräten. Die Verwendung von "lazyload" zum Verzögern des Ladens der Inhalte innerhalb des Iframes ist möglich. Das Beispiel zeigt, wie dies gemacht werden kann.

Der Inhalt des Viewers im Iframe kann eine Bildergalerie, eine 3D / 360-Produktrotation oder ein hochauflösendes Bild mit progressivem Zoom sein. Da der AJAX-ZOOM-Viewer adaptiv ist, wird er sich automatisch an die Größe des responsiven Iframes anpassen.

example15_clean

Saubere (ohne zu viel redundanten Code) Implementierung des AJAX-ZOOM 360 Dreh- und Zoom-Viewers mit einer einzigen 360-Produktansicht.

Sie können es für 360 Produktansichten mit einer einzelnen Zeile und 3D-Rotationen mit mehreren Zeilen verwenden.

Fast ohne überflüssigen Code und Text ist dieses Beispiel ideal für die Implementierung in Ihr Projekt. Der JavaScript-Quellcode enthält Kommentare. Wenn Sie den Code ansehen, werden Sie schnell verstehen, welche Parameterwerte variabel sind und wofür sie stehen. Beispielsweise steht der Wert des Parameters 3dDir für den Pfad zu dem Ordner mit 360 Grad Produktbildern.

example15_responsive

Responsives 360-Grad AJAX-ZOOM Viewer Beispiel ohne der Verwendung von Bootstrap oder anderen CSS-Bibliotheken.

Es zeigt, wie Sie die Größe des übergeordneten Containers über JavaScript ändern können, damit auch der darin enthaltene Viewer seine Größe ändert. Wenn sich die Fenstergröße ändert, wird die Größe des Viewers automatisch angepasst, sodass Sie in diesem Fall keine Maßnahmen ergreifen müssen.

Dieses Beispiel zeigt auch, wie Sie eine andere 360-Grad-Produktansicht in dieselbe Instanz des Viewers mittels der $.fn.axZm.loadAjaxSet API Methode laden können. Außerdem werden die API-Methoden $.fn.axZm.zoomReset zum Zurücksetzen des Zooms und $.fn.axZm.fillArea zum Abdecken der Bühne des Viewers vorgestellt.

example15_fullscreen

Öffnen des 360 Grad Produkt Players als volles Browserfenster beim Aufbau der Seite und ohne Benutzerinteraktion.

Der übergeordnete Container ist auf "body" HTML-Element gesetzt. Öffnen des AJAX-ZOOM im echten Vollbildmodus ist nicht möglich ohne dass dies der Benutzer aktiv durch Klick-Ereignis ausgelöst hat. Diese Einschränkung ist durch Browser auferlegt.

example19

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.

example27

In diesem Beispiel wird AJAX-ZOOM in der responsiven Fancybox bei Klick geladen .

Dies ist ein leicht modifiziertes Fancybox-Skript der ersten Generation (MIT). Anstatt Quellbilder zu laden, lädt das Skript den AJAX-ZOOM-Viewer mit der tiefen Zoom Funktionalität und optionaler Galerie mit Miniaturansichten. Es kann auch AJAX-ZOOM 360 Viewer laden. Die Änderungen am Fancybox Core-JavaScript der ersten Generation wirken sich jedoch nicht auf die Standardfunktionalität aus! Sie können es also für beide Zwecke verwenden.

Um AJAX-ZOOM mit Fancybox auf diese Weise aufzurufen, haben wir eine Wrapper-Erweiterung erstellt. Dieses separate $.openAjaxZoomInFancyBox Plugin löst aus und verwaltet den AJAX-ZOOM-Viewer in der Fancybox. E s macht auch die Fancybox der ersten Generation responsive. Das $.openAjaxZoomInFancyBox Plugin funktioniert auch mit der unveränderten Fancybox 2 Version. Bei Facybox 1 waren noch Änderungen notwendig.

Dieses Beispiel kann auch als Tutorial zum Definieren des Inhalts dienen, den Sie in den AJAX-ZOOM-Viewer laden möchten! Es listet beispielhaft alle möglichen Abfragezeichenfolgeparameter auf (zoomData, zoomDir, 3dDir, zoomFile und zoomID). Dies sind die Parameter, die AJAX-ZOOM standardmäßig unterstützt, um einfache Bilder und Pfade für den 360-Viewer zu definieren. Das Beispiel erläutert auch, wie Sie die Werte der Parameter komprimieren können. Das Komprimieren hilft direkte Bildpfade vor dem öffentlichen Zugriff zu verbergen und die Länge der Abfragezeichenfolge zu verkürzen.

example30

In diesem Tutorial wird eine grundlegende Handhabung von AJAX-ZOOM beschrieben. Es ist eine sehr einfache, aber nützliche Demonstration des Öffnens des AJAX-ZOOM 360 / 3D-Viewers oder einer Galerie mit einfachen Bildern im Vollbildmodus, wobei das Klick-Ereignis an ein beliebiges HTML-Element angehängt werden kann.

Um mit der Integration dieser Vorgehensweise beginnen zu können, müssen Sie nur einige JavaScript-Dateien in Ihr Template aufnehmen.

example33_clean

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.

example36

Der AJAX-ZOOM 360 Viewer kann mit seinen API-Methoden zwischen 360-Produktansichten wechseln.

Eine der Methoden ist $.fn.axZm.loadAjaxSet. Wenn angewandt, behält eine 360-Ansicht beim Wechsel die Bildnummer, jedoch nicht den Zoom-Status bei. Mit der $.fn.axZm.loadAjax360Type Methode dagegen, können Sie zwischen 360 Produkt-Spins wechseln, ohne den Zoom-Status zu verlieren. Diese Methode ist ideal für 360 Produkt Konfiguratoren.

In diesem Beispiel ist es möglich, diese beiden Methoden innerhalb einer responsiven Integration vergleichsweise auszuprobieren, was ebenfalls in der Vollbildansicht funktioniert.

Module / Plugins

"Module / Plugins / Erweiterungen" sind nicht notwendig, um AJAX-ZOOM in Ihrem CMS oder Shop nutzen zu können. Allerdings erleichtern und beschleunigen unsere Module den Prozess der Integration erheblich. Wenn alle technischen Voraussetzungen zu dem Server und PHP erfüllt sind, dann haben Sie AJAX-ZOOM innerhalb von zwei Minuten in Ihrem Shop am Laufen.

Die Module bzw. Plugins sind mit wenigen Klicks installierbar ohne dass Sie eine einzige Zeile Code schreiben müssen. Das Gleiche gilt für die Verwendung in Ihrem Shop.

Die Module, sowie AJAX-ZOOM selbst, werden regelmäßig aktualisiert und mit neuen Funktionen ausgestattet. Kundenspezifische Änderungen bzw. Funktionen sind möglich.

Magento PrestaShop WooCommerce WordPress shortcode Opencart Oxid Shopware

Verfügbar sind Module für Magento, Prestashop, WooCommerce (WordPress), Opencart, Shopware und Oxid.

Besonders empfehlenswert ist die AJAX-ZOOM Erweiterung für Shopware, sowie Shopware selbst. Die Erweiterung für Shopware ist unsere Spielwiese für neue Funktionen, die erst später in andere Module übernommen werden. Das heißt natürlich nicht, dass die Funktionen nicht ausgereift sind. Das Gegenteil ist der Fall.

Kompatibilität

Lizenz

Der Lizenzpreis richtet sich primär an der Anzahl unterschiedlicher Bilder, welche im AJAX-ZOOM Player insgesamt auf einer Domain angezeigt werden. Vollständige Lizenzvereinbarung und die Preisliste finden Sie im Downloadbereich. Die Demo (Light) Version kann natürlich kostenfrei heruntergeladen und in Ihrer Umgebung ausprobiert werden.

Bei Bedarf können wir eine zeitlich limitierte Lizenz ausstellen, wobei AJAX-ZOOM und die Module bzw. Plugins auch ohne Eingabe der Lizenzdaten mit einigen Einschränkungen funktionieren sollten. Falls etwas nicht wie erwartet funktioniert, zögern Sie nicht uns zu kontaktieren. Bei den Preisen handelt es sich um einmalige Zahlung.

Um Live-Support-Chat nutzen zu können wird Skype vorausgesetzt.

Sollte Live-Support-Chat über Skype nicht sofort zu erreichen sein, dann hinterlassen Sie bitte im Skype eine Nachricht oder schreiben Sie uns eine Email über die Kontakt Seite.

Jede Anfrage wird beantwortet!

Live-Support-Chat