Ö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 den neien AJAX-ZOOM APP container, die Fancybox und die Colorbox jQuery Erweiterungen, um die Vorgehensweise zu veranschaulichen.

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.

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.

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.

Ö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.

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.

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.

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.

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.

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.