This is a rather very specific and rare mouseover zoom (flyout zoom window) script. It uses multi-resolution image tiles technology within the flyout window.
On default, the flyout window is not appearing on touch devices and small screens. Instead, it just shows a swipe slider with zoom functionality. However, you can enable it also for touch devices by changing one option of the plugin.
#alternatives {example32: yes !important;}
If you are looking for a "normal" hover zoom without a tiled view in the flyout window
but would like to apply tiled view when the user clicks to see the bigger image, then
is the right plugin for you!
Anyway, it is worth taking a look at because example32 mouseover zoom looks very similar, but it is conceptually different!
In this example, we simulate the zoom effect used in many web shops these days. The main advantage of using AJAX-ZOOM is that it does not require the client to load the entire high-resolution image. Only some image tiles for a particular zoom level and viewport load at first. More tiles are loading when the user pans around or zooms in and out (similar to Google maps). This way the source image can be of any size and quality.
This mouseover zoom extension has been updated to be responsive / adaptive now. Resize the window / reload to see how it behaves.
$.mouseOverZoomTiles(options) extension to triggerBefore, this example required a lot of inline JavaScript.
Now it is completely overhauled.
There is a new $.mouseOverZoomTiles AJAX-ZOOM extension
which you can use as a regular plugin and set up using several options listed below on this page.
Thus, it is now much easier to implement.
Also now, you can configure the flyout window to be responsive,
e.g., adapt to the size of a container or fit into the available space to the right.
Users with the mouse can change the zoom level by using the mouse wheel.
At a click, the AJAX-ZOOM viewer opens at fullscreen or full browser window.
That depends on if the browser supports the fullscreen API and the fullScreenApi option setting of the extension is enabled.
AJAX-ZOOM can preserve the zoom level from the flyout window when it opens at fullscreen by clicking on the mouseover image. However, at that expanded view, users can furthermore magnify by using the mouse wheel or clicking on the viewer with the left mouse button for zooming in and with the right mouse button for zooming out.
At top-right of the mouseover image area there is an optional magnifier icon.
Clicking on it triggers the fullscreen view without preserving the viewport in the flyout window.
Alternatively, you can trigger fullscreen by using the AJAX-ZOOM $.fn.axZm.initFullScreen() API method.
For the image thumbnails below the viewer, we formerly used the jCarousel plugin.
Now, the AJAX-ZOOM $.axZmThumbSlider
plugin replaces it.
The plugin is part of the AJAX-ZOOM package.
Several other examples and AJAX-ZOOM extensions including AJAX-ZOOM viewer itself use the plugin to display image thumbnails in several situations.
This plugin is responsive, it can display vertically or horizontally,
and it works well on touch devices of any kind including iOS, Android and Windows.
Within this hover zoom extension, you can override the default options of that thumbnails slider plugin
by setting the galleryAxZmThumbSliderParam option of the $.mouseOverZoomTiles extension.
Unless not otherwise specified in the images option of the $.mouseOverZoomTiles extension,
AJAX-ZOOM generates the thumbnails by the AJAX-ZOOM dynamic images script automatically.
However, you do not necessarily need to use the $.axZmThumbSlider plugin.
You can disable it by the galleryAxZmThumbSlider option.
Generally, you have the freedom to put the thumbnails with or without the thumbnails slider anywhere in your layout.
Well done very helpful............