example31_responsive.php HOME Examples overview Download Ask a question
example32_axZmMode.php

Responsive AJAX-ZOOM Mousehover Zoom / Slider - jQuery Multimedia Extension Ver. 5 with optional 360° Spins, Multilevel 3D, Videos, Product Tour, Hotspots...

Mouseover Zoom loading...

Load different images / 360° set and other API

360 +
images
only
images
only one 360 two 360
or more
only one image one 360 with product tour no 360
no images
only videos

A common situation is that the images in mouseover zoom have to be changed, e.g. depending on color / variants selection of an article. With jQuery.mouseOverZoomInit.replaceImages you can easily change images and / or 360° / videos objects... Click on the text links below the circles to see which code is executed when you click on them. But of course if you use one of our e-commerce modules you do not have to care about this all. This is just in case you want to integrate this AJAX-ZOOM extension somewhere manually.

New: "axZmMode" option
- enable - disable
Enabling "axZmMode" option will let the mouseover extension act as most other AJAX-ZOOM examples: the AJAX-ZOOM player is displayed directly inline. Users can zoom in with mouse wheel / pinch zoom without clicking on mouseover image. Accordingly, the mouseover / preview images are not loading. This option were added within this extension primary because of AJAX-ZOOM mouseover extension being already implemented into several e-commerce plugins / modules and it is simply convenient if you want to display AZ like this.
Some other AJAX-ZOOM settings
Enable monitor size fullscreen:
- enable - disable
Disable scroll animation:
- enable - disable
Max zoom on click:
- enable - disable
SpinTo effect:
For 360° / 3D "Product Tour" (on ajax-zoom.com click on the bag)
This will change "ajaxZoomOpenMode" option when "axZmMode" is not enabled
Open AJAX-ZOOM at fullscreen mode
Open AJAX-ZOOM in responsive "Fancybox"
Some mouseover settings
Tint filter:
Mouseover Zoom:
- enabled - disabled
Inner Zoom:
- enabled - disabled
Slider effect:
Prev, next arrows:
- enabled - disabled
Many other configuration options are to find in the documentation below. Within the e-commerce modules, all these options are adjustable in administrator / backend section.

E-Commerce modules

The logotypes below are used for illustration purposes only. AJAX-ZOOM is not affiliated or in partnership with any of the ecommerce software companies represented below. The AJAX-ZOOM extensions / modules / plugins are not official extensions of these companies.

Please be aware, that the e-commerce modules listed above are not needed to use this example. You can implement it manually, wherever.

Integrated 360° / 3D "Product Tour"

This interactive and at the same time guided 360° "Product Tour" is a very user friendly way to present highlights of any product. Thanks to our crop editor such a product tour is very easy and fast to configure. For a trained administrator the process will take less than a minute. Starting with "Prestashop" module, we will update all other ecommerce systems with backend integration for optionally configuring such a product tour... (in case we do not have a module for your system be aware that internally this crop editor can be put into "cms mode" and connected over a controller to any other system without modifications)

Integrated 360° / 3D "Hotspots"

With the help of our hotspot editor you can create multiple hotspots or rectangle image areas, setup several click / mouseover actions for them e.g. links, tooltips, popup lightboxes or bind your own JavaScript functions including AJAX-ZOOM API. The produced JSON type of result for the hotspot configuration can be passed to this mouseover extension manually, however same as with the "Product Tour" the "Hotspot Editor" is integrated into most AJAX-ZOOM ecommerce plugins so you do not have to take care about transfering data anywere but get creative right away.

Compatibility

AJAX-ZOOM works in all modern browsers but is also able to work in legacy IE 7 and IE 8 for the most features. On mobile touch devices AJAX-ZOOM supports pinch-zoom, double tap and two finger pan. On Windows devices, which have a mouse control and touchscreen, AJAX-ZOOM works great as well.

6.0+ 2.0+ >2.0+ 1.0+ 9.5+ 2.0+ 4.0+ Pinch zoom, tap zoom, swipe Windows touchscreen - Chrome, IE, Edge - pinch zoom, tap zoom, swipe

Features (short list)

  • Responsive mouseover area and flyout window with variable or fixed proportions, e.g. 1:1
  • Adjustable for fixed or flexible image proportions
  • Permanent or automatic inner zoom depending on resolution / layout
  • Responsive modal or full screen views on click with AJAX-ZOOM
  • Everything works great on touch devices including mouseover zoom if enabled
  • Optional 360°/3D animations support with (pinch) zoom and full screen view
  • Full multimedia gallery (images, 360°/3D, video) at full screen view
  • Optional responsive thumbnail slider with instant orientation change if set accordingly
  • Fast loading high resolution images, also for 360°/3D animations
  • No need to pre-generate any thumbnails
  • Integrated videos support - Youtube, Vimeo, HTML5
  • Integrated 360°/3D "Product Tour" - very recommendable as it is easy and fast to make
  • Integrated 360°/3D "Hotspots" support
  • Integrated support for "Hotspots" on regular images in full screen / modal view
  • 200+ other options
  • Simple markup (does not need to be adjusted for gallery position any more) - easy integration
  • Localizable
  • All components mainly adjustable over one JavaScript (jQuery) "controller"
  • API, callbacks / hooks for developers of all skill levels
  • Perfect for product presentations and e-commerce
  • Continuous development and improvements, technical support

About this fully responsive mousehover zoom

Prior to Ver. 4.0 of this AJAX-ZOOM mousehover zoom extension it was responsive for the flyout window only. The actual "preview image" was not really responsive. In this new extension everything is absolutely responsive now. A positive side effect caused by the added responsiveness is that a single image can be used as "preview image" - the image which is hovered and the big "flyout image". But this is optional and not necessarily needed.

It has been tested in various Browsers including IE7. Plays nicely with Bootstrap. If you discover any bugs please do not hesitate to report. We will fix them with highest priority.

About 360°/3D rotate

The integrated 360°/3D object spin support is optional! You do not need to have a 360° for every product. However you can put more than one 360° into the gallery.

About 360°/3D hotspots

The extension supports passing hotspots to the player. Hotspots can be made with example33.php. This hotspot editor is integrated directly into the backend of the most AJAX-ZOOM ecommerce plugins.

About 360° / 3D "Product Tour"

The extension supports passing JSON code produces by the special editor which is also integrated into backend of most AJAX-ZOOM ecommerce plugins. The "Product Tour" can be combined with hotspots for the same 360.

About Videos

Ver. 5 of this mouseover zoom extension supports videos as well. Youtube, Vimeo and Dailymotion are lastly integrated over iframe. HTML5 (mp4) videos over video tag with options "videojs" player support. Great for SEO over videos. Vimeo can be used to stream mp4 as paid service.

About Touch Slide

In Ver. 4.1 of this extension there is a new feature for "touch slide" images in order to switch between them. It can be enabled for all devices by setting "noMouseOverZoom" || "noMouseOverZoomTouch" options to true. Starting from Ver. 5 the new "mouseOverZoomHybrid" option together with "noMouseOverZoomTouch" are enabled on default. Thus the user can slide the image with the mouse and see mouseover effect as well at the same time. For touch devices / events mouseover is disabled but could be enabled over options.

Touch slide is also enabled for AJAX-ZOOM in fullscreen view or within responsive fancybox.

About Gallery / Thumbnail Slider

The sliding thumbnail gallery below the mousehover image is optional. It can be replaced or disabled so you have only thumbs floating somewhere else. On default we use jQuery.axZmThumbSlider which is one of AJAX-ZOOM extensions. It is highly configurable, skinable, responsive and touch friendly. You can configure it to be displayed horizontally, vertically or even depending on screen resolution / other factors.

About Fancybox

The version packaged with AJAX-ZOOM is 1.3.4. It was modified to work with AJAX-ZOOM. However everything will also work with Fancybox 2.x which is available separately.

Is this free

In most cases, the answer is lastly nagative.

About AJAX-ZOOM: what makes the difference exactly?

On default only the high resolution "master images" (source images) are needed to be defined (see "images" object / array in the example code below). This "images" object is basically the only thing which needs to be replaced / set dynamically by your application.

All thumbnails and flyout view images are instantly generated by AJAX-ZOOM "image server" which is located at your place (server). The size of the flyout image can be set to e.g. 1200x1200px, which are at most 1.44 Mio. pixels. For a 21 megapixels master image made by e.g. Canon EOS 5D these are around 5-7% of the actual resolution and size.

Alternatively to AJAX-ZOOM PHP based "image server" the paths to these flyout "preview" images can be hardset (see "images" option below) to point to some static (already scaled) images.

By clicking on the lens your users can explore the details of the entire big image with AJAX-ZOOM, which utilizes image tiles technology (simmilar to google maps where the view "gets sharp" when you zoom in), so the big master image never loads into browsers cache; it can be even protected from direct access over http e.g. with .htaccess - (simply put .htaccess file with this code and nothing else into the top directory with your master images: deny from all).

Same as with thumbnails all image tiles can be generated instantly on-the-fly or pregenerated with AJAX-ZOOM special batch tool...

Details about responsiveness

The width of the container in the left column of this responsive page layout is set to 32% of the window width. Consequently the child elements in the left column are 100% width and do change their width instantly depending on window width. So does AJAX-ZOOM mouseover zoom extension.

But what about the height of this mouseover zoom? It can be set to a fixed pixel value; if your responsive layout takes into account the height it can also be set to some variable value; but most likely you would just want to preserve a certain proportion of the height depending on width. In this case just set the new "heightRatio" option e.g. to 1.0 and the height of mouseover will be instantly adjusted making the mouseover square. If your images are mostly portrait orientated (common for fashion retailers), then you could set "heightRatio" value to e.g. 1.5; setting "heightRatio" to 'auto' will set the proportion instantly to the proportion of the actual image. Be aware though that if proportion of the images in the gallery is different the height will change on image switching, which might be unwanted behavior.

Setting "heightRatio" option may result in that the height of the mouseover zoom is bigger than window height and the image is not fully visible. To prevent this you can limit the calculated height with the "maxSizePrc" option. The value of 1.0 would limit the height to 100% of window height; a value of 0.8 to 80% of window height; you can also define two values, e.g. '1.0|-120' which would be window height minus 120px.

This responsive example page layout "collapses" the three column layout when the width of the browser window is less than a certain amount of pixels. This is done over CSS "media queries" and max-width condition which is common in modern templates, e.g. @media only screen and (max-width: 960px){...} With the new options called "heightMaxWidthRatio" and "widthMaxHeightRatio" you can take account of these changes and adjust e.g. "heightRatio" depending on max-width, e.g. heightMaxWidthRatio: ["960|0.8", "700|0.7"]. The above basically means that below 960px of window width the "heightRatio" option turns into 0.8 and below 700px "heightRatio" turns into 0.7;

The "flyout" window with bigger image is set to cover the middle column div (the text over gray background) - "zoomWidth" and "zoomHeight" options of "mouseOverZoomParam" are set to the selector '#middleSideContent' which is simply the id of the middle column. In case the browsers window is less than 960px the design of this example page changes in the way that the width of mouse over image is 100%; consequently there is no room for the flyout window, so this mousehover changes the "position" option of "mouseOverZoomParam" from 'right' to 'inside' (inner zoom).

Notes: this responsive page layout is not well elaborated and is only meant to show how the new responsiveness of AJAX-ZOOM mouseover zoom extension does work. Resize the browser window to see the effect.

JavaScript & CSS files in Head

Please note that depending on configuration not all of these js and css files are needed! See "Dependencies" below;

Show / hide - JavaScript & CSS files in Head

<!-- jQuery core, needed if not already present! -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- AJAX-ZOOM core, needed! -->
<link href="../axZm/axZm.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

<!-- Include mousewheel script, optional -->
<script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>

<!-- Include thumbSlider JS & CSS, optional -->
<link href="../axZm/extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>

<!-- Preloading spinner, optional -->
<script type="text/javascript" src="../axZm/plugins/spin/spin.min.js"></script>

<!-- Scripts for 360 crop gallery! Only needed if you use 360 "Product Tour" -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.imageCropLoad.js"></script>
<link rel="stylesheet" href="../axZm/extensions/jquery.axZm.expButton.css" type="text/css" />
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.expButton.js"></script>

<!-- AJAX-ZOOM mouse over zoom extension version 5, needed! -->
<link href="../axZm/extensions/axZmMouseOverZoom/jquery.axZm.mouseOverZoom.5.css" type="text/css" rel="stylesheet" />
<!-- Comment out if pngMode is enabled -->
<!--
<link href="../axZm/extensions/axZmMouseOverZoom/jquery.axZm.mouseOverZoomPng.5.css" type="text/css" rel="stylesheet" />
-->

<script type="text/javascript" src="../axZm/extensions/axZmMouseOverZoom/jquery.axZm.mouseOverZoom.5.js"></script>
<script type="text/javascript" src="../axZm/extensions/axZmMouseOverZoom/jquery.axZm.mouseOverZoomInit.5.js"></script>

<!--  Fancybox lightbox javascript, please note: it has been slightly modified for AJAX-ZOOM, only needed if ajaxZoomOpenMode below is set to "fancyboxFullscreen", optional... Fancybox 2 is also supported -->
<link href="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<!-- AJAX-ZOOM extension to load AJAX-ZOOM into maximized fancybox, requires jquery.fancybox-1.3.4.css and jquery.fancybox-1.3.4.js, optional -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.openAjaxZoomInFancyBox.js"></script>

<!-- Videojs if used... -->
<link href="//vjs.zencdn.net/5.11.9/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="//vjs.zencdn.net/5.11.9/video.js"></script>

		

HTML markup

Please note that the HTML markup has been slightly changed in mousehover zoom extension version 5. It will still work with old layout, however some new responsive features enabled on default will not work as expected which might be indended if you e.g. want the gallery to be displayed completly somewhere else. What you need anyway is the "container for mouse over image" with some unique ID and CSS class "axZm_mouseOverZoomContainer". Also an container for gallery images with an unique ID with optional! CSS class "axZm_mouseOverGallery". Depending on the gallery container having this CSS class named "axZm_mouseOverGallery" additional classes will be added or not added to gallery container. These classes and CSS will be added depending on resolution of the screen and options settings.

Show / hide - HTML markup

<!-- AJAX-ZOOM mouseover block  -->
<div class="axZm_mouseOverWithGalleryContainer">

	<!-- Parent container for offset to the left or right -->
	<div class="axZm_mouseOverZoomContainerWrap">

		<!-- Container for mouse over image -->
		<div id="az_mouseOverZoomContainer" class="axZm_mouseOverZoomContainer">
			<!-- Optional CSS aspect ratio and message to preserve layout before JS is triggered -->
			<div class="axZm_mouseOverAspectRatio">
				<div><span>Mouseover Zoom loading...</span></div>
			</div>
		</div>
	</div>

	<!-- gallery with thumbs (will be filled with thumbs by javascript) -->
	<div id="az_mouseOverZoomGallery" class="axZm_mouseOverGallery"></div>

 </div>
		

Javascript

You do not need all the options below to be listed as most of them are set to their default values.

Show / hide - Javascript

Documentation Mouseover Extension Ver. 5

Contents settings
OptionDefaultDescription
images{}
object, array
Object containing absolute paths to the master images, optional with titles. Start with 1, not 0. Your master image "img" can be as big as you want, it never loads into cache You can also protect the directory with .htaccess or other http access restrictions.

    images: {
        1: {
            img: "/pic/fashion_001.jpg", 
            title: "Test Title 1"
        },
        2: {
            img: "/pic/fashion_002.jpg", 
            title: "Test Title 2"
        },
        3: {
            img: "/pic/fashion_003.jpg", 
            title: "Test Title 3"
        }
    }
    
Alternatively you can link to your static images with these keys:

  • "zoom" - big mouseover image
  • "preview" - preview image
  • "thumb" - image for the gallery
  • "img" - your master image is needed anyway to open AJAX-ZOOM on click; this image can be in a directory with restricted access over http;
  • "title" - optional title
  • "hotspotFilePath" - Optionally you can define "hotspotFilePath" for each images which is the path to the file containing data for hotspots. For more information see example33.php or JSON / JS object with hotspots configuration. The hotspots will be visible in fullscreen or responsive fancybox.


So the images object would look like this:

    images: {
        1: {
            zoom: "/cache/fashion_001_1200x1200.jpg",
            preview: "/cache/fashion_001_350x400.jpg",
            thumb: "/cache/fashion_001_80x100.jpg"
            img: "/pic/fashion_001.jpg", 
            title: "Test Title 1"
        },
        2: {
            zoom: "/cache/fashion_002_1200x1200.jpg",
            preview: "/cache/fashion_002_350x400.jpg",
            thumb: "/cache/fashion_002_80x100.jpg",
            img: "/pic/fashion_002.jpg", 
            title: "Test Title 2"
        },
        3: {
            zoom: "/cache/fashion_003_1200x1200.jpg",
            preview: "/cache/fashion_003_350x400.jpg",
            thumb: "/cache/fashion_003_80x100.jpg",
            img: "/pic/fashion_003.jpg", 
            title: "Test Title 3"
        }
    }
    
In case "zoom", "preview" and "thumb" are not defined, AJAX-ZOOM will generate these images out of "img" instantly on-the-fly.

"images" option can be also of type array, e.g.

        images: [
            {    img: "/pic/fashion_001.jpg", 
                title: "Test Title 1"
            },
            {    img: "/pic/fashion_002.jpg", 
                title: "Test Title 2"
            },
            {    img: "/pic/fashion_003.jpg", 
                title: "Test Title 3"
            }
        ]
    
images360{}
object, array
Object or an array with paths to the folders which contain 360 degree images; mostly you would want to add only one 360 spin but the "images360" object can contain as many as you like;

    images360: {
        1: {
            path: "/pic/zoom3d/Uvex_Occhiali", 
            position: "first"
        }
    }
    
Other possible keys are:

  • "thumb" - direct link to thumb image displayed in the gallery. In case "thumb" is not present AJAX-ZOOM will internally request first image of your 360 and generate the thumb. You can disable this by setting "images360Thumb" option below to false so you will only get a 360 degree icon which is ok too.
  • "thumbImg" - instead of "thumb" you can also directly link to an image under "path" out of which AJAX-ZOOM will generate the gallery thumb
  • "title" - optional title
  • "hotspotFilePath" - optional path to the file which contains data for hotspots. For more information see example33.php or JSON / JS object with hotspots configuration.
  • "crop" - JSON generated with example35.php or path to the file (static or dynamically generated) which contains this JSON.
  • "is3D" - not needed; tells the plugin that the path is multilevel 360 spherical or half spherical 3D.


Most AJAX-ZOOM main script options can be set with JavaScript. You could define these options for each 360 individually, e.g.

  • "spinReverse" - reverse the direction of the spin
  • "spinDemoTime" - time in ms during which AJAX-ZOOM will make one turn
  • "someThingElse..." - any other key
videos{}
object, array
Object containing videos configuration. Start with 1, not 0.

    videos: {
        1: {key: "YmcyTNWs9_Q", type: "youtube", position: "last", thumbImg: false},
        2: {key: "171617419", type: "vimeo", position: "last", thumbImg: false},
        3: {key: "x20g8k1", type: "dailymotion", position: "last", thumbImg: false, title: "Lorem..."},
        4: {
            key: "http://vjs.zencdn.net/v/oceans.mp4", 
            type: "html5", position: "last", 
            thumbImg: false, 
            settings: {}, 
            title: "Lorem..."
        }
    }
    
Configuration keys:

  • "key" - key of the video or url for html5
  • "type" - type of the video, possible values are youtube, vimeo, dailymotion or html5
  • "position" - position in the gallery (first, last, afterFirst)
  • "thumbImg" - link to thumbnail / image. For youtube / vimeo / dailymotion they can be received instanly, not need to be deifned
  • "settings" - for html5 you can define several options over "settings" which is an object too. This will extend the global settings for html5 player. In e-commerce plugins these settings can be also set individually for each video over backend.
  • "title" - optional title
General settings
OptionDefaultDescription
axZmPathauto
string
Path to AJAX-ZOOM, e.g. "/zoomTest/axZm/". The default "auto" value might not always work so if you experience any difficulties please set the path manually. It is recommended to set this path manually anyway!
axZmModefalse
bool
Enabling "axZmMode" option will let the mouseover extension act as most other AJAX-ZOOM examples: the AJAX-ZOOM player is displayed directly inline. Users can zoom in with mouse wheel / pinch zoom without clicking on mouseover image. Accordingly, the mouseover / preview images are not loaded. This option were added within this extension primary because of AJAX-ZOOM mouseover extension being already implemented into several e-commerce plugins / modules and it is simply convenient if you want to display AJAX-ZOOM like this.
maxZoomModefalse
bool
Set AJAX-ZOOM settings the way, that the user has only the possibility to spin at not zoomed state; zoom on click goes down to 100%; an other click at zoomed state will zoom out again.
maxZoomSetBtntrue
bool
If "maxZoomMode" is activated, enable a single button, which will fully zoom out when clicked on it. The button appears only at zoomed state.
divIDaz_mouseOverZoomContainer
string
DIV (container) ID for mouseover zoom :-)
galleryDivIDaz_mouseOverZoomGallery
string, bool
DIV (container) id of the gallery, set to false to disable gallery.
lang""
string
Language, e.g. "en", "fr" or "de". On default, when not defined / empty, the language is browser or system language.
disableAllMsgfalse
bool
AJAX-ZOOM produces some notifications within the player telling that image tiles or other files are generating and returns the result. This happens only when an image or 360 images are opened for the first time. This is also the reason why preloading is slow at first. With this switch you can disable these notifications in the frontend.
dotNavigation400
int
Enable dot navigation if browser / device resolution is less than this value. See also "thumbSliderMinSize" option. Setting both - "dotNavigation" and "thumbSliderMinSize" to same value will result in dot navigation replacing gallery on devices with small resolution. Set to 0 to disable.
floorWidthtrue
bool
Prevent browser computed width with decimals for AJAX-ZOOM containers.
pngModenull
bool, string
Enable PNG mode in different ways: null will not change the configuration set in zoomConfig.inc.php or other php configuration files at all; auto, true and false will set pngMode setting in PHP. Auto means that cached thumbnails, image tiles etc. will be only kept as PNG if source images are PNG too. Transparancy is also preserved. If true, all cached images will be converted to PNG, even if they are JPG. If false, all cached images will be converted to JPG.
hideGalleryOneImagetrue
bool
Instantly hide gallery if there is only one image, one video or one 360/3D.
hideGalleryAddClassaxZm_mouseOverNoMargin
string
This option is mainly for the layout with vertical gallery which is located next (left or right) to mouseover area. The most solid CSS layout for vertical gallery is when "divID" is wrapped by a div which has a left or right margin. This margin corresponds to vertical gallery width + some space in between. So if "hideGalleryOneImage" option is activated and there is only one image, only one 360 or no images / 360s at all, then the container represented by "galleryDivID" option is hidden and there is more space which can be filled. To do that we simply add a CSS class with margin 0 to the parent of "divID" overriding the left or right margin which is not needed for the gallery. You can change the "hideGalleryAddClass" to your own class name or set it to false to prevent this action.
galleryHoverfalse
int, bool
Use mouseenter (mouseover) for switching between images. You can specify an integer which will represent the time in ms to wait for switching after the mouse enters the thumb; true defaults to 200.
gallerySwitchSlidefalse
bool
Placeholder, not finished yet (todo).
galleryAxZmThumbSlidertrue
bool
Use $.axZmThumbSlider on gallery thumbnails or not.
galleryAxZmThumbSliderParamHorz{}
object
$.axZmThumbSlider options if "galleryAxZmThumbSlider" is enabled and gallery is horizontal. For full list of options see under: http://www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/
Example:
{
    "thumbLiStyle": {
        "borderRadius": 3
    },
    "btn": true,
    "btnClass": "axZmThumbSlider_button_new",
    "btnHidden": true,
    "btnOver": false,
    "scrollBy": 1,
    "centerNoScroll": true
}
galleryAxZmThumbSliderParamVert{}
object
$.axZmThumbSlider options if "galleryAxZmThumbSlider" is enabled and gallery is vertical. For full list of options see under: http://www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/
Example:
{
    "thumbLiStyle": {
        "borderRadius": 3
    },
    "btn": true,
    "btnClass": "axZmThumbSlider_button_new",
    "btnHidden": true,
    "btnOver": false,
    "scrollBy": 1,
    "centerNoScroll": true
}
thumbSliderPositionleft-bottom
string
Position of the thumb slider. Possible values are left, top, right, bottom, as well as any combination of these separated with the dash, e.g. left-bottom.
thumbSliderPositionSwitchauto
int, string
Possible values: "auto" as string or integer. Auto means depending on whether the screen is in portrait or landscape mode the first or second value of "thumbSliderPosition" suited for the resolution will be chosen. For the value set as integer the second position from "thumbSliderPosition" will be chosen if width of the screen is less than this integer and the position suits for current resolution.
thumbSliderMinSize400
int
Minimal browser width for the gallery to be displayed. See also "dotNavigation" option!
thumbSliderDimensionHorz80
int
Height of the container for the gallery when placed horizontally.
thumbSliderDimensionVert80
int
Width of the container for the gallery when placed vertically.
thumbSliderAutoSizeHorztrue
bool
Thumb CSS size will be set instantly depending on "thumbSliderDimensionHorz" and other options.
thumbSliderAutoSizeVerttrue
bool
Thumb CSS size will be set instantly depending on "thumbSliderDimensionVert" and other options.
thumbSliderAutoMarginHorz7
int
Thumb margin when set instantly for horizontal gallery.
thumbSliderAutoMarginVert7
int
Thumb margin when set instantly for vertical gallery.
thumbSliderAutoExtendHorz0
int
Extend slider height by a fixed value when set instantly for horizontal gallery - "thumbSliderAutoSizeHorz".
thumbSliderAutoExtendVert0
int
Extend slider width by a fixed value when set instantly for vertical gallery - "thumbSliderAutoSizeVert"
thumbSliderHorzMargin10
int
Horizontal margin of the vertical gallery to mouseover container.
thumbsFadeIn200
int
Fadein duration / speed of the thumbnails added to the gallery.
thumbW64
int
Gallery image thumb width. Please note that when "galleryAxZmThumbSlider" is enabled, the final thumbnail width and height are determined by CSS set over "galleryAxZmThumbSliderParam".
thumbH64
int
Gallery image thumb height. Please note that when "galleryAxZmThumbSlider" is enabled, the final thumbnail width and height are determined by CSS set over "galleryAxZmThumbSliderParam".
thumbRetinatrue
bool
Double resolution of the thumb image.
thumbModefalse
bool, string
Create thumbnails in a way similar to css background values cover and contain.
qualityThumb100
int
Jpeg quality of the gallery thumbs.
thumbIcontrue
bool
Place an icon over gallery thumbnail depending on media type. The icon has CSS class axZmThumbSliderIcon and the source is defined in "thumbIconFile" option.
thumbIconFile{...}
object
Source for icons placed over the thumbnails in the gallery. If only filename without path is defined the path presumed to be the /axZm/icons folder. You can also set complete different paths including the image filename instead.
Default:
{
    "360": "360_1.png",
    "3D": "3d_1.png",
    "youtube": "youtube_icon_30.png",
    "vimeo": "vimeo_icon_30.png",
    "dailymotion": "video_icon-30.png",
    "html5": "video_icon-30.png"
}
thumbWfs64
int
Fullscreen gallery image thumb width.
thumbHfs64
int
Fullscreen gallery image thumb height.
thumbRetinaFstrue
bool
Double the resolution of fullscreen gallery image thumbs.
thumbModeFsfalse
string, bool
Create thumbnails in a way similar to css background values cover and contain.
qualityThumbFs100
int
Jpeg Quality of the thumbnails in fullscreen gallery.
quality90
int
Jpeg quality of the preview image.
qualityZoom80
int
Jpeg quality of the zoom image shown in the flyout window.
firstImageToLoad1
int
Image from "images" option which should be loaded at first. See also "images360firstToLoad" option below. The "images" option does not exist as defineable option in AJAX-ZOOM modules / plugins for ecommerce systems because obviously the purpose of the modules is to set it instantly.
images360firstToLoadfalse
bool
In case present load 360 from "images360" first and not an image from "images".
images360Thumbtrue
bool
Show first image of the spin as thumb.
images360ThumbDefaultPostionfirst
string
Default position of the thumbnail representing a 360/3D in the gallery. The position can be also defined for each thumb individually. Possible values are: "first", "afterfirst" and "last". See also "videoThumbDefaultPostion" option.
images360ThumbBeforeVideotrue
bool
If activated thumbnails in the gallery representing a 360/3D will be appended before thumbnails representing videos.
images360Overlayfalse
bool
Add a div with class "spinOverlImg" or "spinOverl" over the gallery thumb. On default it has a 360 icon as background.
images360Smallmedia-360-600.png
string
Placeholder image when 360 is slided. If only filename without path is defined the path presumed to be the /axZm/icons folder. You can also set complete different paths including the image filename instead.
images360Bigmedia-360-1200.png
string
Placeholder image when 360 is slided. If only filename without path is defined the path presumed to be the /axZm/icons folder. You can also set complete different paths including the image filename instead.
images360examplemouseOverExtension360Ver5
string
Configuration set which is passed to ajax-zoom when opening a 360/3D. The configuration set can be found in /axZm/zoomConfigCustom.inc.php
zoomMsg360{...}
object, string
Message displayed under mouse over zoom when 360 is loaded, e.g. "Drag to spin 360, scroll to zoom". For more than one language define a js object, e.g. {"en": "english text", "de": "german text"}
Default:
{
    "en" : "Drag to spin 360°, scroll to zoom in and out, right click and drag to pan",
    "de" : "Ziehen um 360° zu drehen, zoomen mit dem mausrad, rechte maustaste ziehen verschiebt die Ansicht",
    "fr" : "Faites glisser pour tourner à 360 °, faites défiler pour zoomer dans et hors, cliquer et faire glisser à droite pour vous déplacer",
    "es" : "Arrastrar para girar en 360º, Rueda del ratón para utilizar el Zoom, botón derecho para mover la imagen"
}
zoomMsg360_touch{...}
object, string
Message displayed under mouse over zoom when 360 is loaded on touch devices. For more than one language define a js object, e.g. {"en": "english text", "de": "german text"}
Default:
{
    "en" : "Drag to spin 360°, pinch to zoom in and out",
    "de" : "Ziehen um 360° zu drehen, zoomen mit zwei fingern",
    "fr" : "Faites glisser pour tourner à 360 °, pincer pour zoomer et dézoomer",
    "es" : "Arrastrar para girar en 360º, pellizcar para ampliar y reducir"
}
zoomMsg{...}
object, string
Message displayed under the Player only, when "axZmMode" is enabled and an image is loaded. For more than one language define a js object, e.g. {"en": "english text", "de": "german text"}
Default:
{
    "en" : "Drag to spin 360°, scroll to zoom in and out, right click and drag to pan",
    "de" : "Ziehen um 360° zu drehen, zoomen mit dem Mausrad, rechte Maustaste ziehen verschiebt die Ansicht",
    "fr" : "Faites glisser pour tourner à 360 °, faites défiler pour zoomer dans et hors, cliquer et faire glisser à droite pour vous déplacer",
    "es" : "Arrastrar para girar en 360º, Rueda del ratón para utilizar el Zoom, botón derecho para mover la imagen"
}
zoomMsg_touch{...}
object, string
Message displayed under the player, when "axZmMode" is enabled and an image is loaded on touch devices. For more than one language define a js object, e.g. {"en": "english text", "de": "german text"}
Default:
{
    "en" : "Drag to spin 360°, pinch to zoom in and out",
    "de" : "Ziehen um 360° zu drehen, zoomen mit zwei fingern",
    "fr" : "Faites glisser pour tourner à 360 ° , pincer pour zoomer et dézoomer",
    "es" : "Arrastrar para girar en 360º, pellizcar para ampliar y reducir"
}
preloadMouseOverImagestrue
string, bool
Preload all preview and mouseover images, possible values: false, true oder "oneByOne".
noImageAvailableClassaxZm_mouseOverNoImage
object, string
In case there are no images in "images", nor there are any in "images360", a div with some image as background can be appended to the container and receive this options value as CSS class. For more than one language define a js object, e.g. {"en": "axZm_mouseOverNoImage_en", "de": "axZm_mouseOverNoImage_de"}
widthauto
int, string
Width of the preview image or "auto" (depending on parent container size - "divID", see above). This is also the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly. If width or height are set to "auto", both: width and height of the preview image are set to 50% of the value taken from "mouseOverZoomWidth", so on default it is 600px
heightauto
int, string
Height of the preview image or "auto" (depending on parent container size - "divID", see above). This is also the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly. If width or height are set to "auto", both: width and height of the preview image are set to 50% of the value taken from "mouseOverZoomWidth", so on default it is 600px
oneSrcImgfalse
bool
Use same image for "preview image" - the image which is hovered and the big "flyout image".
heightRatio1
float, string
"heightRatio" with instantly adjust the height of mouseover container depending on width calculated by the browser, e.g. 1.0 will always (only limited by "maxSizePrc" option) make height same as width; a value of 1.5 will make the preview like a portrait. You can also set "heightRatio" to "auto". In this case the height will be adjusted to cover available space instantly! Please note that when your images are not always same proportion, then the container will also change the size when the user switches to a different image.
heightRatioOneImgsame
string, int
Overwrites "heightRatio" if only one image / 360 is present and e.g. gallery is instantly disabled. Set to "same" in order to prevent any impact on "heightRatio" option.
heightMaxWidthRatio[]
array, string, bool
Similar as you would set max-width: someValue @media only screen condition you can define "heightRatio" depending on the width of the browser, e.g. ["960|0.8", "700|0.7"]. You can define a string or js array with more than one conditions.
widthRatiofalse
array, string, bool
Oposit of "heightRatio".
widthMaxHeightRatio[]
array, string, bool
Oposit of "heightMaxWidthRatio"
maxSizePrc1.0|-120|-25
string, float
Limit the actual height if "heightRatio" option is set. Setting "heightRatio" option may result in that the height of the mouseover zoom is bigger than window height and the image is not fully visible. To prevent this you can limit the calculated height with this "maxSizePrc" option. The value of 1.0 would limit the height to 100% of window height; a value of 0.8 to 80% of window height; you can also define two values, e.g. '1.0|-120' which would be window height minus 120px. '1.0|auto' would be window height minus thumbnails gallery height if it is positioned at bottom or top. If you define third value e.g. '1.0|-120|-25' it will replace the second value if gallery is not positioned at bottom or top. The fourth value can be a jQuery selector for HTML elements which height should be substracted from the calculated height of the player, e.g. '1.0|-120|-25|#header_top'
mouseOverZoomWidth1200
int
Max width of the image that will be shown in the zoom window; this is the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly. Please note that the size is limited by $zoom['config']['allowDynamicThumbsMaxSize'] which is can be set in '/axZm/zoomConfig.inc.php'. You can also specify a link to the image, see "images" option above. To set the width of the fly out window see "zoomWidth" under "mouseOverZoomParam".
mouseOverZoomHeight1200
int
Max height of the image that will be shown in the zoom window; this is the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly. Please note that the size is limited by $zoom['config']['allowDynamicThumbsMaxSize'] which is can be set in '/axZm/zoomConfig.inc.php'. You can also specify a link to the image, see "images" option above. To set the height of the fly out window see "zoomHeight" under "mouseOverZoomParam".
mouseOverContainfalse
bool
Create preview and the image, which is shown in the zoom window, with the same size / proportion as it is set in "mouseOverZoomWidth" and "mouseOverZoomHeight" options. Empty space will be filled with white color or kept transparent for png images.
ajaxZoomOpenModefancyboxFullscreen
string
Determines how AJAX-ZOOM is opened when the user clicks on preview images / lens, possible values: 'fullscreen' (see also "fullScreenApi" option below) or 'fancyboxFullscreen'.
ajaxZoomOpenModeTouchfullscreen
string
Determines how AJAX-ZOOM is opened when the user touch - clicks on preview images / lens, possible values: 'fullscreen' and 'fancyboxFullscreen'.
fancyBoxFullscreenParam{...}
string
If fancyboxFullscreen is used in "ajaxZoomOpenMode" option, Fancybox options. Prefixed with box and capitalized first letter!
Default:
{
    "boxMargin": 30,
    "boxPadding": 10,
    "boxCenterOnScroll": true,
    "boxOverlayShow": true,
    "boxOverlayOpacity": 0.85,
    "boxOverlayColor": "#777",
    "boxTransitionIn": "fade",
    "boxTransitionOut": "fade",
    "boxSpeedIn": 300,
    "boxSpeedOut": 300,
    "boxEasingIn": "swing",
    "boxEasingOut": "swing",
    "boxShowCloseButton": true,
    "boxEnableEscapeButton": true,
    "boxOnComplete": function(){}
}
examplemouseOverExtension360Ver5
string
Configuration set which is passed to ajax-zoom when opening a 2D image. The configuration set can be found in /axZm/zoomConfigCustom.inc.php
exampleFancyboxFullscreenmouseOverExtension360Ver5
string
Configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'fancyboxFullscreen'.
enforceFullScreenRes768
int
Enforce "ajaxZoomOpenMode" to be "fullscreen" if screen width is less than this value.
prevNextArrowsfalse
bool
Put prev / next buttons over mouseover zoom. CSS: .axZm_mouseOverPrevNextArrows;
prevNextArrowsTouchtrue
bool
Put prev / next buttons over mouseover zoom for touch devices. CSS: .axZm_mouseOverPrevNextArrows;
prevNextArrowsSlidetrue
bool
Slide images to right or left when clicked on the prev / next buttons.
prevNextArrowsOver1500
int
Hide prev / next buttons when mouse is not over the player. The value determines the delay after which the event is fired. Set to 0 to disable.
disableScrollAnmtrue
bool
Disable animation while zooming with AJAX-ZOOM and using mousewheel.
fullScreenApifalse
bool
Try to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers except IE < 10 and mobile.
axZmCallBacks{}
object
AJAX-ZOOM has several callbacks / hooks, http://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart
azOptions{}
object
Some AJAX-ZOOM options can be set with JS when AJAX-ZOOM is inited. Normally you would be defining them in /axZm/zoomConfig.inc.php or /axZm/zoomConfigCustom.inc.php; this field is for convenience reasons. Example: {"fullScreenCornerButton": false} - this would disable the button for fullscreen.
azOptions360{}
object
Same as above but specifically for 360/3D. In AJAX-ZOOM modules for ecommerce systems you can also set these options for each 360 individually... As an example for setting this option manually would be such an object: {"mouseScrollEnable": true, "mNavi": {"enabled": true, "gravity": "bottomLeft", "order": {"mZoomOut": 5, "mZoomIn": 15}}}
postModefalse
bool
Set AJAX-ZOOM to use POST instead of GET.
360 "Product tour"
OptionDefaultDescription
cropAxZmThumbSliderParam{}
object
Slider settings for 360° "Product Tour". Can be kept empty. See also "galleryAxZmThumbSliderParam" option for more info.
Example:
{
    "btn": true,
    "btnClass": "axZmThumbSlider_button_new",
    "btnHidden": true,
    "centerNoScroll": true,
    "thumbImgWrap": "azThumbImgWrapRound",
    "scrollBy": 1
}
cropSliderPositionbottom
string
Position of the 360° "Product Tour" slider, possible values: "top", "right", "bottom", "left" and any combination between those separated with dash.
cropSliderPositionSwitchauto
string, int
Possible values: "auto" as string or integer. Auto means depending on whether the screen is in portrait or landscape mode the first or second value of "cropSliderPosition" suited for the resolution will be chosen. For the value set as integer the second position from "cropSliderPosition" will be chosen if width of the screen is less than this integer and the position suits for current resolution.
cropSliderPosPrioritytrue
bool
Prioritize placing 360° "Product Tour" slider, defined in "cropSliderPosition", before positioning fullscreen thumbnail slider, defined in "fsSliderPosition".
cropSliderRepositionright-bottom
string
In case the positions of the gallery slider and the slider for 360 Product tour collude, the alternative position. Possible values: "left-bottom", "left-top", "right-bottom", "right-top" and "opposite".
cropSliderDimension86
int
Width or height (depending on position) of the instantly created container for the 360° "Product Tour" thumb slider.
cropSliderThumbAutoSizetrue
bool
Thumb CSS size will be set instantly depending on "cropSliderDimension" option.
cropSliderThumbAutoMargin10
int
Thumb margin when set instantly.
cropSliderThumbDescrtrue
bool
Enable descriptions for the thumbs in the slider for 360° "Product Tour".
cropSliderThumbDescrMargin0
int
Extend margin under the thumbs for thumb descriptions.
cropSliderMinSize400
int
Minimal size of the player (width or height) for 360° "Product Tour" gallery (if present) to be shown.
cropSliderNotParent""
string
Prevent showing 360° "Product Tour" gallery when the parent container matches the id or CSS class represented as string in this option value, e.g. "az_mouseOverZoomContainer". For more than one value split them with vertical dash.
cropAxZmEbOpt{...}
obejct
Options for $.axZmEb function which is used for descriptions for 360° "Product Tour". Documentation to be updated...
Default:
{
    "marginX": 5,
    "marginY": 5,
    "openSpeed": 300,
    "closeSpeed": 300,
    "fadeInSpeed": 200,
    "autoOpen": false,
    "arrow": true,
    "thumbSlider": true,
    "parO": "#axZm_zoomLayer",
    "dynText": true,
    "dynTextBtn": [
        {"base": 0.016, "min": 12, "max": 24, "important": true}
    ],
    "dynTextTitle": [
        {"base": 0.016, "min": 18, "max": 28, "important": true}
    ],
    "dynTextDescr": [
        ["*", {"base": 0.012, "min": 12, "max": 24, "important": true}],
        ["h3", {"base": 0.016, "min": 16, "max": 32, "important": true}]
    ]
}
Fullscreen gallery
OptionDefaultDescription
fsAxZmThumbSliderParam{}
obejct
$.axZmThumbSlider options for fullscreen gallery. For full list of options see under: /modules/ajaxzoom/axZm/extensions/axZmThumbSlider/
Example:
{
    "scrollBy": 1,
    "btn": true,
    "btnClass": "axZmThumbSlider_button_new",
    "btnLeftText": null,
    "btnRightText": null,
    "btnHidden": true,
    "pressScrollSnap": true,
    "centerNoScroll": true,
    "wrapStyle": {
        "borderWidth": 0
    }
}
fsSliderPositionright-bottom
string
Position of the fullscreen thumbnail slider. Possible values are: "top", "right", "bottom", "left" and any combination between those separated with dash, e.g. "right-bottom". Positions with dash mean that the second after dash is the alternative position which could be switched instantly depending on the logic described in "fsSliderPositionSwitch" option.
fsSliderRepositionright-bottom
string
In case sliders position collude, the alternative position. Possible values: "left-bottom", "left-top", "right-bottom", "right-top", "opposite".
fsSliderPositionSwitchauto
string, int
Switch fsSliderPosition instantly depending on certain conditions. This switch is only applied when fsSliderPosition value is "top-left", "top-right", "bottom-left" or "bottom-right". Possible values are "auto" or integer; When "auto" is enabled an alternative position will be chosen depending on screen being in portrait or landscape mode. If value of fsSliderPositionSwitch is integer, alternative position will be only chosen if screen width (or height - depending on first value of fsSliderPosition before dash) is less than fsSliderPositionSwitch value.
fsSliderDimension80
int
Width or height of the container for fullscreen slider (depends on if it is vertical or horizontal).
fsSliderThumbAutoSizetrue
bool
Adjust fsSliderDimension depending on fsAxZmThumbSliderParam instantly (to be improved).
fsSliderThumbAutoMargin7
int
Thumbnails margin when fsSliderThumbAutoSize is enabled.
fsSliderThumbAutoExtend0
int
Extend slider width / height by this pixel value when set instantly.
fsSliderThumbDescrfalse
bool
Dummy for future implementation (todo).
fsSliderMinSize400
int
Minimal size of the player for fullscreen gallery to be shown.
fsSliderGalleryFadeInAnmCenter
string
Switching animation between images in fullscreen mode. Possible values: "Center", "Top", "Right", "Bottom", "Left", "StretchVert", "StretchHorz", "SwipeHorz", "SwipeVert", "Vert", "Horz".
fsSliderNotParentaxZm_mouseOverSpinWrapper
string
Prevent showing fullscreen gallery when the parent container matches the id or CSS class represented as string in this option value, e.g. "az_mouseOverZoomContainer". For more than one value split them with vertical dash.
onGallerySwitchnull
function
Callback function triggered every time an item is switched. The function receives 4 argumets: index of the item, item information as object, mouseover instance and gallery instance. In AJAX-ZOOM modules avoid writing the actual functions, instead pass a reference, e.g. window.myCustomFunc
Specific options for the mouseover zoom
mouseOverZoomParam{... ... ...}All specific options for the mouseover zoom are keys of mouseOverZoomParam object!
OptionDefaultDescription
positionright
string
Position of the flyout zoom window, possible values: "inside", "top", "right", "bottom", "left".
posAutoInside150
int
Applies when width (left, right) or height (top, bottom) of zoom window are less than this px value (zoomWidth || zoomHeight are set to auto); if zoomWidth || zoomHeight are fixed, applies when zoom window is out of page border.
touchScroll0.8
float
If width of the mouseover zoom container is more than 80% (0.8) of the window width, then for touch devises the inner zoom will be not triggered and the user can scroll down. Click for open AJAX-ZOOM remains. Set this value to 0 if you want to enable the slider for touch devices only.
noMouseOverZoomfalse
bool
Disable mouseover zoom for all devices.
noMouseOverZoomTouchtrue
bool
Enable "noMouseOverZoom" only for touch devices (mouseover zoom works for touch devices too but is not very convenient so this option is enabled on default now).
noMouseOverZoomInsidefalse
bool
Disable mouseover zoom if it is 'inside' (inner zoom).
noMouseOverZoomInsideTouchtrue
bool
Disable mouseover zoom if it is inside (inner zoom) and touch event.
mouseOverZoomHybridtrue
bool
Enable mouseover zoom and slider at the same time for not touch devices.
slideTouchTime200
int
Slide time in ms after touch and drag.
slideTime300
int
Slide time after clicked on prev / next buttons.
posInsideArea0.2
float
When "posAutoInside" is enabled and inner zoom fires or "position" option is set to 'inside' right away - there is no lens. However you will notice that the reaction to mouse movements occure somewhere in the middle of the image; at the edges mostly nothing happens in similar scripts. With this option you can adjust how far from the edge mouse movements should be captured. The range is between 0 and 0.5;
posInsideScaleAnm20
int
When inner zoom fires there will be a zoom animation. This value determines the smoothness of this zoom animation. The higher the value, the longer the animation will last. Set to 0 to disable.
autoFlip200
int
Flip right to left and bottom to top if less than int px value or false to disable.
biggestSpacefalse
bool
Overrides position option and instantly chooses the direction, disables autoFlip; plays nicely when zoomWidth and zoomHeight are set to 'auto'.
zoomFullSpacefalse
bool
Uses full screen height (does not align to the map / disables adjustY) if position is right or left || uses full screen width (does not align to the map / disables adjustX) if position is top or bottom.
zoomWidth530
int, string
Width of the zoom window e.g. 540 or 'auto' or jQuery selector|correction value, e.g. '#refWidthTest|+20'; so if you want to have a width of the zoom window same as for example a responsive container to the right (so it is fully covered) and max possible height, then define the id of this container to the right, e.g. 'myArticleData', set "zoomWidth" to '#myArticleData|+10' and "zoomHeight" to 'auto'. If you have a three column design and want to cover both containers to the right, then just define both containers in the jQuery selector, e.g. '.pb-center-column,.pb-right-column|+20'; the margin between the containers is not taken into account but you can adjust the result with the second value after vertical bar.
zoomHeight450
int, string
Height of the zoom window e.g. 375, or 'auto' or jQuery selector|correction value, e.g. '#refWidthTest|+20'; if your selector matches more than one element, e.g. '.pb-center-column,.pb-right-column|+20', then the highest value will be chosen. This is different from the multiple selector in "zoomWidth", where the values are added.
autoMargin15
int
If zoomWidth or zoomHeight are set to 'auto', the margin to the edge of the screen.
adjustX15
int
Horizontal margin of the zoom window.
adjustY-1
int
Vertical margin of the zoom window.
lensOpacity1
float
Opacity of the selector lens.
lensStyle{}
object
Quickly override CSS of the lens.
lensClass""
string
Define CSS class for the lens.
lensMessage{...}
object, string
Text string on the lens. For more than one language define a js object, e.g. {"en": "english text", "de": "german text"}
Default:
{
    "en" : "Full screen",
    "de": "Vollbild",
    "fr": "Plein écran",
    "es": "Pantalla completa"
}
zoomAreaBorderWidth1
int
Border thickness of the zoom window.
galleryFade300
int, bool
Speed of inner fade or false.
shutterSpeed150
int, bool
Speed of shutter fadein or false; applies only if image proportions are different from container.
showFade300
int
Speed of fade in for mouse over.
hideFade300
int
Speed of fade out for mouse over.
flyOutSpeedfalse
int, bool
Speed for flyout or false to disable.
flyOutTransitionlinear
string
Transition of the flyout.
flyOutOpacity0.6
float
Initial opacity for flyout.
flyBackSpeedfalse
int, bool
Speed for fly back or false to disable.
flyBackTransitionlinear
string
Transition type of the fly back.
flyBackOpacity0.2
float
Final opacity of fly back.
autoScrollfalse
bool
Scroll page when clicked on the thumb and the mouse over preview image is not fully visible.
smoothMove6
int
Integer bigger than 1 indicates smoother movements. Set 0 to disable.
tintfalse
string, bool
Color value around the lens or false.
tintOpacity0.3
float
Opacity of the area around the lens when "tint" option is set to some color value.
tintFilterfalse
string, bool
Apply filter to the image, e.g. "blur", "grayscale", "sepia", "lighten", "darken", "invert", "saturate"; see also .axZm_mouseOverEffect>img CSS.
tintFilterBacknone
string
Background-color if some "tintFilter" is enabled, e.g. #FFF
tintLensBacktrue
bool
Show background image in the lens.
showTitlefalse
bool
Enable / disable title on zoom window
titlePositiontop
string
Position of the title, possible values are: 'top', 'bottom' or 'above'.
titleParentContainer""
string
jQuery selector, e.g. #abc_title, as parent container for title other than inside the lense, can be anywhere.
titlePermanentfalse
bool
When "titleParentContainer" is defined, title (text) will be set after loading / switch of the image.
cursorPositionX0.5
float
Cursor over lens horizontal offset, 0.5 is middle
cursorPositionY0.55
float
Cursor over lens vertical offset, 0.5 is middle.
loadingtrue
bool
Display loading information, CSS class: .mouseOverLoading; See also "spinner" option.
loadingMessage{...}
object, string
Loading message, not needed, can be just the "spinner" - see below.
Default:
{
    "en": "Loading...",
    "de": "Loading...",
    "fr": "Loading...",
    "es": "Loading..."
}
zoomHintEnabletrue
bool
Enable zoom icon which disappears on mouse hover; CSS class: .axZm_mouseOverZoomHint; if you want to change the position or the icon simply modify the CSS class;
zoomHintText{...}
object, string
Text which will be appended next to the icon enabled by "zoomHintEnable". For more than one language define a js object, e.g. {"en": "english text", "de": "german text"}
Default:
{
    "en" : "Zoom",
    "de" : "Zoom",
    "fr" : "Zoom",
    "es" : "Zoom"
}
zoomMsgHover{...}
object, string
Message which can appear under the mouse over zoom, CSS class: .axZm_mouseOverZoomMsg; For more than one language define a js object, e.g. {"en": "english text", "de": "german text"}
Default:
{ 
    "en" : "Roll over the image to zoom in",
    "de" : "Für größere Ansicht mit der Maus über das Bild ziehen",
    "fr" : "Survolez l'image pour zoomer",
    "es" : "Pase el cursor sbore la imagen para hacer zoom con la rueda del ratón"
}
zoomMsgHoverTouch{...}
object, string
Message which can appear under the mouse over zoom for touch devices, CSS class: .axZm_mouseOverZoomMsg; For more than one language define a js object, e.g. {"en": "english text", "de": "german text"}
Default:
{ 
    "en" : "Tap to open expanded view",
    "de" : "Klicken Sie auf das Bild, um erweiterte Ansicht zu öffnen",
    "fr" : "Cliquez sur l'image pour ouvrir la vue élargie",
    "es" : "Haga clic para ampliar la imagen"
}
zoomMsgClick{...}
object, string
Message which can appear under the mouse over zoom when the mouse enters it, CSS class: .axZm_mouseOverZoomMsg; For more than one language define a js object, e.g. {"en": "english text", "de": "german text"}
Default:
{
    "en" : "Click to open expanded view",
    "de" : "Klicken Sie auf das Bild, um erweiterte Ansicht zu öffnen",
    "fr" : "Cliquez sur l'image pour ouvrir la vue élargie",
    "es" : "Haga clic para ampliar la imagen"
}
slideInTime200
int
Slide in time if "noMouseOverZoom" is enabled or "touchScroll" option enables for touch devices.
slideInEasingCSS3easeOutExpo
string
jQuery equivalent of easing or own function (string), e.g. "cubic-bezier(0.21,0.51,0.4,2.02)", see also cubic-bezier.com
slideInEasingeaseOutExpo
string
jQuery easing function for sliding in (fallback if CSS3 animation is not supported).
slideInScale0.8
float
Scale initial size (goes eventually to 1.0 while animation).
slideOutScale0.8
float
Scale slideout size.
slideOutOpacity0
float
Slideout opacity.
slideOutDest4
integer
Target slideout position, possible values: 1, 2, 3 or 4;
onInitfalse
function
Callback JS function or reference ot it.
onLoadfalse
function, null
Callback JS function or reference ot it.
onImageChangefalse
function, null
Callback JS function or reference ot it.
onMouseOverfalse
function, null
Callback JS function or reference ot it.
onMouseOutfalse
function, null
Callback JS function or reference ot it.
spinnertrue
bool
Use ajax loading spinner without gif files etc. Set to false to disable.
spinnerParam{...}
object
Spinner options, for more info see: http://fgnass.github.com/spin.js/
Default:
{ 
    "lines": 11,
    "length": 3,
    "width": 3,
    "radius": 4,
    "corners": 1,
    "rotate": 0, 
    "color": "#FFFFFF",
    "speed": 1,
    "trail": 90, 
    "shadow": false,
    "hwaccel": false,
    "className": "spinner", 
    "zIndex": 2e9,
    "top": 0, 
    "left": 1 
}
Video settings
OptionDefaultDescription
imagesVideoFirstToLoadfalse
bool
Load video first if present. See also "images360firstToLoad" option.
imagesVideoImgmedia-play-256.png
string
Used as replacement if "imagesVideoThumb" is enabled and poster image is missing.
imagesVideoBrokenmedia-play-256.png
string
Replacement thumbnail image if instant loading of the poster image from youtube, vimeo etc. fails.
imagesVideoOverlayfalse
bool
Add a div with class "videoOverlImg" or "videoOverl" over the gallery thumb.
imagesVideoThumbtrue
bool
Show real poster image as thumb in the gallery if defined.
imagesVideoBigmedia-play-1200.png
string
Placeholder image for videos in mouseover.
imagesVideoSmallmedia-play-600.png
string
Placeholder image for videos in mouseover.
videoThumb{...}
object
Settings including sources for poster images for YouTube, Vimeo and Dailymotion.
Default:
{
    "youtube": {
        "url": "https://i1.ytimg.com/vi/",
        "img": "mqdefault"
    },
    "vimeo": {
        "url": "https://vimeo.com/api/v2/video/",
        "img": "thumbnail_medium"
    },
    "dailymotion": {
        "url": "https://api.dailymotion.com/video/",
        "img": "thumbnail_480_url"
    }
}
videoThumbDefaultPostionlast
string
Default position of the thumbnail representing a video in the gallery. The position can be also defined for each thumb individually. Possible values are: "first", "afterfirst" and "last". See also "images360ThumbDefaultPostion" option.
videoUrl{...}
object
Url of the external players.
Default:
{
    "youtube": "//www.youtube-nocookie.com/embed/",
    "vimeo": "//player.vimeo.com/video/",
    "dailymotion": "//www.dailymotion.com/embed/video/"
}
videoSettings{...}
object
Api / default parameters for the players.
Default:
{
    "youtube": {
        "autoplay": 0,
        "controls": 1,
        "showinfo": 0,
        "loop": 0,
        "fs": 1,
        "rel": 0,
        "modestbranding": 0,
        "iv_load_policy": 3,
        "theme": "light"
    },
    "vimeo": {
        "autopause": 1,
        "autoplay": 0,
        "badge": 1,
        "byline": 0,
        "color": "eaeaea",
        "loop": 0,
        "portrait": 0,
        "title": 0
    },
    "dailymotion": {
        "autoplay": 0,
        "logo": 0,
        "quality": 720,
        "related": 0,
        "html5": 1
    },
    "html5": {
        "controls": true,
        "autoplay": false,
        "loop": false,
        "muted": false,
        "preload": "auto"
    }
}
videoHtml5ClickPlaytrue
bool
Toggle play/pause for HTML5 players when clicked anywhere on the player.
videoHtml5Postermedia-play-1200.png
string
Specific default poster image for HTML5 player.
videoHtml5VideoJstrue
bool
Enable Videojs player for html5 videos.
videoHtml5VideoJsSkinvjs-default-skin
string
Skin for Videojs player.
videoHtml5VideoJsPostermedia-video-1200.png
string
Specific default poster image for HTML5 Videojs player.
videoHtml5VideoJsOpt{...}
object
Options for Videojs player.
Default:
{
    "controlBar": {
        "muteToggle": false
    },
    "techOrder": ["html5", "flash", "other supported tech"]
}
Last updated: 2017-10-22

Dependencies

Several different plugins are used in this mouseover zoom tool. Depending on the configuration not all of them are needed but they all are included in the download package. The options below refer to jQuery.mouseOverZoomInit(options) which acts like a proxy to the other plugins.

Needed plugins: Optional plugins to open AJAX-ZOOM: Optional plugins:

Comments (3)

Vadim Jacobi 2015-09-30 15:38:26
Vadim Jacobi Carl: all licensing information can be found at
http://www.ajax-zoom.com/index.php?cid=download
Carl Tierney 2015-09-30 03:52:04
Carl Tierney Hello
This script is amazing, would like to use it, can you give me licensing information, please.
arpan 2013-10-23 10:55:48
arpan hello there..
i want to use this script. can you please give me license information.


also i want to the inner zoom function not that the zoomed image should appear in a separate box.
thank you in advance

Leave a Comment

Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, your personal image will be attached every time you comment.