Kurz über das AJAX-ZOOM Bild Zoom beim Hover Extension

Die multimedia Galerie wird automatisch erzeugt und ist ebenfalls über zahlreiche Parameter veränderbar. Sie kann aber auch gänzlich abgeschaltet werden. Die Position der Galerie (rechts, links, oben und unten) ist dynamisch per Breakpoints einstellbar.

Ebenfalls sind die Proportionen der Ansicht als fest, den Bild Proportionen entsprechend oder per Breakpoints definierbar. Unabhängig von der Reihenfolge der Bilder, 360 Grad Ansichten und Videos kann man frei bestimmen, welches Element zuerst geladen wird.

Für die Darstellung eines Bildes wird nur ein hochauflösendes "Masterbild" benötigt. Die Skalierungen werden automatisch erzeugt, wobei für das Mouseover Bilder die einzelne Miniaturansichten und Vorschaubilder direkt als Pfad definierbar sind. Wie auch Immer die Bilder definiert sind ist es hier wichtig hervorzuheben, dass im Mouseover Zoom bzw. Slider nicht das hochauflösendes "Masterbild" erscheint, sondern eine einstellbar kleinere Version davon. Standardmäßig ist die maximale Größe auf 1200x1200px begrenzt, was für die Voransicht im Zoom Fenster meistens ausreicht.

Beim Klick auf das Vorschaubild öffnet sich das hochauflösende Bild im AJAX-ZOOM Viewer je nach Einstellung und Endgerät entweder in einer responsiven Fancybox oder sofort in einer Vollbild Ansicht. Im Player werden dabei nur die Teilbereiche des Bildes geladen, welche bei der Größe der Ansicht und Ausschnitt bzw. Zoombereich erforderlich sind, so dass auch ein 50 Megapixel großes Bild ohne Verzögerung geladen wird. Der HTTP Pfad zu dem hochauflösenden "Masterbild" kann z.B. über ".htaccess" gesperrt werden, da es nur vom AJAX-ZOOM benötigt wird, welcher nur Serverseitig drauf zugreift. Gleiches gilt auch für die 360 Bilder. Wenn Sie diese Art des dynamischen Ladens nicht möchten, können Sie die " einfache Modus Option" aktivieren, um das große Bild vollständig zu laden, wenn es abhängig von Bildschirmgröße und Ebene des Zooms angemessen ist.

Weiteres

Diese Erweiterung als "Mouseover Zoom" zu bezeichnen ist jedoch inzwischen nicht ganz korrekt. Denn sie kann weitaus mehr, als der Name dies vermuten lässt. Ursprünglich wurde sie tatsächlich entwickelt um eine dem Nutzer vertraute Ansicht, meist in einem Shopsystem zu bieten. Mit der Zeit kamen dann die 360 Bilder hinzu, sowie die Videos. Ziel war es einen all-in-one Player zu schaffen, welches einfach einzubauen ist und dennoch eine erweiterte Multiskalen Zoom-Ansicht bereitstellt.

Da AJAX-ZOOM insbesondere bei 360 Grad Ansichten viele weitere herausragende Funktionen zu bieten hat, hier wären vor allem die 360 Produkt-Tour und die Hotspots zu nennen, wurden diese nach und nach mit integriert. Dann wollten einige Kunden keine Mouseover Erweiterung, sondern wie bei 360 Fotos sofort eine zoombare Ansicht dargestellt bekommen. Da wir bereits einige Module bzw. Plugins für diverse Systeme erstellt haben, machte es einfach keinen Sinn dorthin weitere Frontend Implementierungen zu integrieren.

Folglich haben wir mit nur einer "axZmMode" Option die Möglichkeit geschaffen, die Mouseover Erweiterung in multimediale AJAX-ZOOM Box zurück zu konvertieren. Aktiviert, können Sie diese "axZmMode" Option in diesem Beispiel ansehen.

Schließlich, als uns die "Mobile First" Vorgehensweise auferlegt wurde, bei der mouseover Zoom zwar funktionsfähig gemacht werden konnte bzw. bei uns längst funktionierte, jedoch zugegebenermaßen nicht gerade userfreundlich war, haben Bild-Slider als Mittelweg zwischen Mobile und Desktop Einzug erhalten. Wir haben uns auch dieser Herausforderung gestellt und sowohl die nicht Multiskalen Voransicht, als auch den AJAX-ZOOM Viewer im Slider-Stil mit Touch-Slide bzw. Touch-Swipe Steuerung, sowie Steuerung mit der Maus ausgestattet. Herausgekommen ist also eine herausragende Hybrid-Erweiterung, welche je nach Einstellung die eine, oder andere Form annehmen kann.

Dabei ist es egal, welche Kombination an Bildern, 360 Grad Produktansichten und Videos in den Player geladen werden. Man kann alle zusammen, in beliebiger Kombination oder nur beispielsweise Videos oder nur 360 Produktbilder darin anzeigen. Auch das Umschalten des Contents, was etwa bei Produktvariationen erforderlich ist, kann problemlos über die API ausgeführt werden. Wenn kein Bild und auch keine anderen Media Daten vorhanden sind, erscheint eine "kein Bild vorhanden" Nachricht als Platzhalter.

Generell ist diese Erweiterung dazu ausgelegt Daten im JSON Format aus einer Datenbank heraus zu verarbeiten. Man kann aber natürlich die Daten auch manuell eingeben. Für normale Bilder, 360 Bilder und Videos ist jeweils eine separate Objekteigenschaft vorgesehen, deren Wert wiederum ein Objekt oder Array ist, damit mehrere Datensätze eines Typs möglich sind. Für die Daten zu Hotspots und 360 Produkt-Touren, die unter anderem über spezielle online Editoren erstellt und dort als JSON abgespeichert werden, können diese entweder als Pfad zu einer Datei, die das entsprechende JSON ausgibt, angegeben werden oder man kann das JSON direkt z.B. für den Wert des "hotspotFilePath" Attributs reinschreiben.

jQuery.mouseOverZoomInit({
	axZmPath: "../axZm/", // Path to AJAX-ZOOM, e.g. /zoomTest/axZm/
	divID: "az_mouseOverZoomContainer", // Container ID for mouseover zoom
	galleryDivID: "az_mouseOverZoomGallery", // Container ID of the gallery, set to false to disable gallery
	images: {
		// jsonDataImg is defined elsewhere
		1: {img: "/pic/subfolder/image_hash_1.jpg", title: "Image one", hotspotFilePath: jsonDataImg},
		2: {img: "/pic/subfolder/image_hash_2.jpg", title: "Image two description"},
		3: {img: "/pic/subfolder/image_hash_3.jpg", title: "Image three description"},
	},

	images360: { // path(s) to the folder with 360 images
		1: {path: "/pic/mOver/360_SM", position: "first", spinReverse: true, spinDemoTime: 4500, title: "Stop motion 360"},
		// jsonData1 is defined elsewhere
		2: {path: "/pic/mOver/360_BAG", position: "first", spinReverse: true, spinDemoTime: 4500, crop: jsonData1, title: "Bag 360"}
	},

	videos: {
		1: {key: "YmcyTNWs9_Q", type: "youtube", position: "last", thumbImg: false, title: "youtube video"},
		2: {key: "171617419", type: "vimeo", position: "last", thumbImg: false, title: "vimeo video"},
		3: {key: "x37x496", type: "dailymotion", position: "last", thumbImg: false, title: "dailymotion video"},
		4: {key: "https://vjs.zencdn.net/v/oceans.mp4", type: "html5", position: "last", thumbImg: false, title: "MP4 video"}
	}
});

Die Erweiterung besitzt außerdem eine in PHP geschriebene Helfer-Klasse, welche die vollständiger Dokumentation über die Erweiterung in English und Deutsch enthält, sowie mehreren Methoden um die Optionen bzw. Einstellungen, sowie die Bilddaten aufzubereiten, bevor diese in JavaScript an die Erweiterung übergeben werden. Diese Klasse wird fortdauernd aktualisiert und natürlich an die Funktionalität des JavaScripts angepasst. Die Benutzung dieser Klasse ist jedoch absolut nicht notwendig. Wir benutzen sie in den Modulen bzw. Plugins für diverse Shopsysteme um die Updatefähigkeit zu erleichtern.

jQuery responsive Mouseover Zoom + 360° Grad Ansichten Viewer, 360° Produkt-Tour + Videos

Diese Mouseover Zoom Erweiterung vereinigt in sich viele Technologien, die AJAX-ZOOM zu bieten hat. Nicht zuletzt deshalb ist sie im Frontend der E-Commerce Module integriert, über das Backend dieser Module steuerbar und über viele Optionen justierbar. Sie lässt sich aber auch manuell woanders integrieren.

Die Mouseover Erweiterung ist sowohl ein Mausover Zoom mit hunderten von Einstellungen, als auch ein Bild Slider, welches sich per Standardeinstellung auf mobilen Endgeräten automatisch einschaltet.

Hotspots (interaktive Markierungen auf dem Bild) sind auf einfachen Bildern und auf optionalen 360 Grad Produktansichten bzw. 360° Produkt-Touren möglich.

Darüber hinaus können Sie Videos von den Videoplattformen "YouTube", "Vimeo" und "dailymotion" hinzufügen oder mit mp4 Videoquellen verknüpfen. Letztere werden innerhalb dieser Erweiterung im "VideoJs" Player oder im nativen HTML5 Video Player des Browsers gezeigt.