About the AJAX-ZOOM's image zoom on hover extension in short

The extension automatically creates a media gallery from data, which is provided in the JavaScript configuration object. Usually, the minimal required data consists of paths to the original images or paths to folders that contain photos making up a 360 or 3D view.

You can provide this data manually while testing or when you have only a few pages with a hand-written input. When integrating it into a database-driven and structured system, you can extract the required data, e.g., image paths from template variables or request directly from the database.

Within the mouseover extension, you can set the gallery's position relative to the viewer statically (right, left, top, and bottom). Or, you can define several "breakpoints" and other parameters to position the gallery dynamically from a set of gravity directions. In the above configuration, the position is either left or bottom. When the width of the stage is less than 400px, which is an adjustable option, the bullet type of navigation replaces the gallery.

The thumbnail gallery, which is a separate and independent component of the mouseover extension, has many additionall configuration parameters. You could also entirely disable the thumbnail gallery and let the users switch between the items by swiping or pressing on the arrows or bullet navigation.

The proportions of the viewer can be "fixed", for example, by 1 or 1 by 1.5, the can correspond to the proporions of an image, or you can define to automatically determin the proportions via breakpoints.

Regardless of the order within the media gallery, any media element - a picture, a 360° product view, or a video can load first! That is especially important if you would like to open this mouseover extension in a modal window upon a click on your already existing gallery. Not that you necessarily would need a mouseover extension in a modal box, but that makes a lot of sense having specific options enabled or disabled; have a look at it!

For displaying an image, the extension only requires a path to the high-resolution "master" image. The image resizing takes place automatically. You can define the sizes of the thumbnails and the mouseover preview images separately. It is essential to point out that the mouseover zoom or slider does not load the high-resolution "master" image but a resized smaller version of it.

By default AJAX-ZOOM's core settings, the size of the flyout image (the image that shows in a flyout window when hovering the slider with the mouse) is limited to 1200x1200px. That is usually sufficient for a preview. When the user clicks on the lense, the high-resolution image opens in the AJAX-ZOOM viewer - either in a responsive modal box or immediately at fullscreen. The details of an image displayed in the AJAX-ZOOM viewer, including pictures of a 360-view, progressively load as the user zooms into it.

Within the AJAX-ZOOM media player, only parts of the large image required by dimensions and viewport are loaded so that, for example, a 50-megapixel image is visible immediately. You can even protect your high-resolution "master" images from access via HTTP, e.g., via directives in ".htaccess" file. AJAX-ZOOM needs to access those images only server-side. The same applies to the 360 images. If you do not want this sort of progressive loading, you can enable the "simple mode option" to load the big master image entirely whenever appropriate for a zoom level and screen size.

Further information about the AJAX-ZOOM's image zoom on hover extension

Today, calling this extension "mouseover zoom" is not entirely accurate because it can do much more than the name suggests. It was originally developed to provide a familiar, low-resolution preview for a user visiting a product detail page, mainly on E-Commerce websites. Over time, we extended its possibilities by adding images from 360 photography and videos. The goal was to create an all-in-one "media box" for presenting products. It should be easy to install, configure, and automatically provide a progressive multiscale zoom view.

Since AJAX-ZOOM includes many additional outstanding features, such as Three hundred sixty product tours and hotspots, those specialties were gradually added to the mouseover extension. Later on, some customers expressed their wish to disable the mouseover functionality and immediately see a progressive zoom view for images and 360-views. By this time, we have already created several modules/plugins for E-Commerce systems that had a deep integration of this mouseover zoom extension. Thus, it simply made no sense to place additional frontend implementations with different options. Consequently, by adding the single option called "axZmMode", we have attached the ability to convert the mouseover extension implementations back into AJAX-ZOOM Player, supporting different media types. You can view this mode enabled in this example.

Finally, when the "mobile first" approach became mandatory, the image sliders became a middle ground between mobile and desktop. We also took up this challenge and equipped the non-multiscale preview and AJAX-ZOOM viewer with the slider-style touch-slide or touch-swipe control, which works with mouse events as well. As a result, it is a highly flexible hybrid extension that appears in one or another look depending on the settings and the user's device.

This extension accepts all combinations of pictures, 360-views, 3D-views, and videos. For example, you can provide data only for 360-views or only for videos. It will display them regardless. Switching between a set of content required for product variations can be easily done through the API. If there is no picture and no other media data, a "no picture available" message appears as a placeholder.

Although you can enter the data for the items manually into the JavaScript configuration object, this extension's design technically expects to process JSON data coming, e.g., from a database. For simplified providing of the data, the extension has three different options for each type of media you want to show. Those options are JavaScript objects, similar to JSON. The data for hotspots and product tours you can create with the corresponding editors can be provided within the properties of those objects or as JavaScript reference to the saved output of those editors. The latter is depicted in the below code example where the value of "hotspotFilePath" property is a variable referencing data for hotspots.

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"}
	}
});

Moreover, the AJAX-ZOOM package has a helper class written in PHP that contains complete documentation about the extension options and several methods to prepare the options and image data before passing them to the extension's initialization function as JavaScript. This PHP class is constantly updated and adapted to the functionality of JavaScript. However, utilizing this class in your code is not necessary. We use it in our modules and plugins for various shop systems to facilitate the updating process.

Responsive jQuery zoom on hover + 360 product views, 360 / 3D product tours + videos

This is a highly flexible and customizable mouseover zoom extension that combines several unique technologies offered by AJAX-ZOOM. Because of its versatility, it is integrated into the front end of all AJAX-ZOOM modules for shopping carts. Administrators control the extension and set up the views via the backend section of those systems. You can, however, integrate it manually elsewhere.

The mouseover zoom extension is both - an image-zoom on hover plugin and a media/photo swipe slider. The latter automatically enable itself on touch devices. As with nearly all behaviors, that is an optional setting.

Placing hotspots (interactive markings on the pictures) is possible on images, optional 360° views, and within the effortlessly creatable 360° product tours.

Additionally, you can add videos from YouTube, Vimeo, Dailymotion, or link to MP4 video sources. MP4 videos can load in the "VideoJs" player or natively in the browser's HTML5 video player.