| Option | Default | Description |
|---|
| axZmPath | 'auto' |
Path to AJAX-ZOOM, e.g. '/zoomTest/axZm/';
'auto' might not always work so if you experience any difficulties
please set the path manually as first.
|
| divID | '' | DIV (container) ID for mouseover zoom |
| galleryDivID | '' | DIV (container) id of the gallery, set to false to disable gallery |
| lang | function | Specify ISO language code, e.g. 'en', default is taken from the users browser |
| hideGalleryOneImage | true | Instantly hide gallery if there is only one image or one 360/3D |
| hideGalleryAddClass | 'axZm_mouseOverNoMargin' |
Ver. 4.1.1+ 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 inbetween. So if "hideGalleryOneImage" option
is activated and there is only one image, only one 360 or no images / 360's 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.
|
| galleryHover | false |
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
|
| galleryAxZmThumbSlider | true | Use $.axZmThumbSlider on gallery thumbnails or not |
| galleryAxZmThumbSliderParam | {} |
$.axZmThumbSlider parameters if "galleryAxZmThumbSlider" is enabled;
for full list of options see under:
/axZm/extensions/axZmThumbSlider/ or
https://www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/
|
| thumbW | 50 | Gallery thumb image width;
Please note that in many examples, e.g. when "galleryAxZmThumbSlider" is enabled,
the final thumbnail width and height are determined by css set over "galleryAxZmThumbSliderParam"
|
| thumbH | 80 | Gallery thumb image height |
| thumbRetina | true | Double resolution of the thumb image |
| qualityThumb | 100 | Jpeg quality of the gallery thumbs |
| quality | 90 | Jpeg quality of the preview image |
| qualityZoom | 80 | Jpeg quality of the zoom image shown in the flyout window |
| cropAxZmThumbSliderParam | {} |
Slider settings for 360° "Product Tour". Can be kept empty.
For full list of options see under:
/axZm/extensions/axZmThumbSlider/ or
https://www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/
|
| cropSliderPosition | 'left' | Position of the crop slider, possible values: "top", "right", "bottom", "left". |
| cropSliderDimension | 86 | Width or height (depending on position) of the instantly created container for the 360° "Product Tour" thumb slider. |
| cropSliderThumbAutoSize | true | Thumb CSS size will be set instantly depending on "cropSliderDimension" option. |
| cropSliderThumbAutoMargin | 7 | Thumb margin when set instantly. |
| cropSliderThumbDescr | true | Enable descriptions for the thumbs in the slider for 360° "Product Tour". |
| images | {} |
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
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"
}
]
|
| firstImageToLoad | 1 | Image from "images" option which should be loaded at first; see also "images360firstToLoad" option below |
| disableAllMsg | false |
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 front office.
|
| images360 | {} |
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.
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
|
| images360firstToLoad | false | In case present load 360 from "images360" first and not an image from "images" |
| images360Thumb | true | Show first image of the spin as thumb |
| images360Overlay | true |
Add a div with class "spinOverlImg" or "spinOverl" over the gallery thumb. On default it has a 360 icon as background.
|
| images360Preview | true | Normally plain images are opened in some kind of lightbox or fullscreen;
By setting this option to true the 360's will load into "divID" at first and can be expanded to responsive fancybox or fullscreen.
|
| images360PreviewResponsive | true | This option is set to true for convinience reasons;
In case your "divID" has fixed width and height, set $zoom['config']['picDim'] option in '/axZm/zoomConfigCustom.inc.php'
after elseif ($_GET['example'] == 'mouseOverExtension360'){
|
| images360examplePreview | 'mouseOverExtension360' |
In case "images360Preview" is set to true, the value of this parameter will be sent to AJAX-ZOOM as "options set" (example=mouseOverExtension360)
|
| zoomMsg360 | 'long string' or object |
Message displayed under mouse over zoom when 360 is loaded, default:
'Drag to spin 360°, scroll to zoom in and out, right click and drag to pan'.
Can be Javascript object e.g. {"en": "text english...", "de": "text german...", "fr":"text french..."}
|
| zoomMsg360_touch | 'long string' or object |
Ver. 4.1.1+ Message displayed under mouse over zoom when 360 is loaded on touch devices, default:
'Drag to spin 360°, pinch to zoom in and out'.
Can be Javascript object e.g. {"en": "text english...", "de": "text german...", "fr":"text french..."}
|
| preloadMouseOverImages | false | Preload all preview and mouseover images, possible values: false, true, 'oneByOne' |
| noImageAvailableClass | 'axZm_mouseOverNoImage' |
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
|
| width | 'auto' |
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" and "responsive" feature is enabled, both width and height of the preview image
are set to 50% of the value taken from "mouseOverZoomWidth", so on default it is 600px;
|
| height | 'auto' |
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" and "responsive" feature is enabled, both width and height of the preview image
are set to 50% of the value taken from "mouseOverZoomWidth", so on default it is 600px;
|
| responsive | true | Set this to true for responsive layouts |
| oneSrcImg | false | Use single image as "preview image" - the image which is hovered and the big "flyout image". |
| heightRatio | 1.0 |
If "responsive" option is enabled, "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.
|
| heightMaxWidthRatio | [] | 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"] |
| widthRatio | false | Opposit of "heightRatio" |
| widthMaxHeightRatio | false | Opposit of "heightMaxWidthRatio" |
| maxSizePrc | 1.0 |
Limit the height if "responsive" and "heightRatio" options are 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.
|
| mouseOverZoomWidth | 1200 |
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".
|
| mouseOverZoomHeight | 1200 |
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".
|
| ajaxZoomOpenMode | 'fancyboxFullscreen' |
Determines how AJAX-ZOOM is opened when the user clicks on preview images / lens,
possible values: 'fullscreen' (see also "fullScreenApi" option below), 'fancyboxFullscreen', 'fancybox', 'colorbox', 'none';
|
| fancyBoxParam | {} |
If fancybox is used in "ajaxZoomOpenMode" option, Fancybox "prefixed" options
Defaults:
{
boxMargin: 0,
boxPadding: 10,
boxCenterOnScroll: true,
boxOverlayShow: true,
boxOverlayOpacity: 0.75,
boxOverlayColor: "#777",
boxTransitionIn: "fade", // 'elastic', 'fade' or 'none'
boxTransitionOut: "fade", // 'elastic', 'fade' or 'none'
boxSpeedIn: 300,
boxSpeedOut: 300,
boxEasingIn: "swing",
boxEasingOut: "swing",
boxShowCloseButton: true,
boxEnableEscapeButton: true,
boxOnComplete: function(){},
boxTitleShow: false,
boxTitlePosition: "float", // 'float', 'outside', 'inside' or 'over'
boxTitleFormat: null
}
|
| colorBoxParam | {} |
If colorbox is used in "ajaxZoomOpenMode" option, Colorbox options
Defaults:
transition: "elastic",
speed: 300,
scrolling: true,
title: true,
opacity: 0.9,
className: false,
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
onOpen: false,
onLoad: false,
onComplete: false,
onClosed: false,
overlayClose: true,
escKey: true
|
| example | 'mouseOverExtension' | Configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'fullscreen' |
| exampleFancyboxFullscreen | 'mouseOverExtension' | Configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'fancyboxFullscreen' |
| exampleFancybox | 'modal' | Configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'fancybox' |
| exampleColorbox | 'modal' | Configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'colorbox' |
| enforceFullScreenRes | 768 |
Ver. 4.1.1 Enforce "ajaxZoomOpenMode" to be "fullscreen" if screen width is less than this value
|
| prevNextArrows | false |
Ver. 4.1.1 Put prev / next buttons over mouseover zoom. CSS: .axZm_mouseOverPrevNextArrows
|
| disableScrollAnm | true | Disable animation while zooming with AJAX-ZOOM |
| fullScreenApi | false | Try to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers except IE < 10 and mobile |
| axZmCallBacks | {} | AJAX-ZOOM has several callbacks, https://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart |
| azOptions | {} | 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 option is for convenience reasons and modules for diverse ecommerce systems where this
example will be implemented into where most of configuration can be made in the back office.
Example: {fullScreenCornerButton: false} - this would disable the button for fullscreen
|
| azOptions360 | {} | Same as above but specifically for 360/3D |
| postMode | true | Ver. 4.1.1+ Set AJAX-ZOOM to use POST instead of GET |
| | | |
| pinterest | {} | Settings for pinterest button, see below: |
|
This internal Pinterest button should be disabled for now till it is reimplemented...
| Value | Default | Description |
|---|
| enabled | false | Experimental feature - enable Pinterest button. Pinterest allows collecting visual bookmarks in the form of images collected on the internet. |
| build | 'parsePinBtns' | Since images are changed the button needs to be repainted [...]
In order to accomplish this Pinterest API should be exposed to window object.
This is done by setting data-pin-build attribute value in the script tag when pinterest JavaScript
is included.
<script data-pin-build="parsePinBtns" type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
So if you do not have the data-pin-build, please add it to the script tag and if it is different from
default ('parsePinBtns'), then change this "build" value. Otherwise the pinterest button will not work.
|
| wrapClass | 'axZm_mouseOverPinterest' |
This is the class of the container where the button will be put into.
On default it is at bottom right. To place the button somewhere else
you can either change the css of the default class or define a different class.
|
| href | //en.pinterest.com/pin/create/button/ | href attribute before the button is build. |
| description | null | Page title if null |
| url | null | Will be set instantly if null |
| media | null | Will be set to current selected image if null |
| btnSrc | //assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png | Source for the button |
| data | {} |
Data attributes attached to the button before it is built. See pinterest API...
|
|
| | | |
| mouseOverZoomParam | {} | JS object containing specific options to this mouseover zoom, see below: |
| Option | Default | Description |
|---|
| position | 'right' | Position of the flyout zoom window, possible values: 'inside', 'top', 'right', 'bottom', 'left' |
| posAutoInside | 150 |
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
|
| posInsideArea | 0.2 |
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 occur 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;
|
| touchScroll | 0.8 |
Ver. 4.1.1+ 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.
|
| noMouseOverZoom | false |
Ver. 4.1.1+ Disable mouseover zoom completely for touch and none touch devices.
If you want to disable it only for touch devices, set "touchScroll" option above to 0
|
| autoFlip | 120 | Flip right to left and bottom to top if less than int px value or false to disable |
| biggestSpace | false |
Overrides position option and instantly chooses the direction, disables autoFlip;
plays nicely when zoomWidth and zoomHeight are set to 'auto'
|
| zoomFullSpace | false |
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
|
| zoomWidth | 'auto' |
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'.
New in Ver. b4: 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.
|
| zoomHeight | 'auto' |
Height of the zoom window e.g. 375, or 'auto' or jQuery selector|correction value, e.g. '#refWidthTest|+20';
New in Ver. b4: 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.
|
| autoMargin | 15 | If zoomWidth or zoomHeight are set to 'auto', the margin to the edge of the screen |
| adjustX | 15 | Horizontal margin of the zoom window |
| adjustY | -1 | Vertical margin of the zoom window |
| lensOpacity | 1.0 | Opacity of the selector lens |
| lensStyle | {} | Quickly override css of the lens |
| lensClass | false | Set css class for the lens |
| zoomAreaBorderWidth | 1 | Border thickness of the zoom window |
| galleryFade | 300 | Speed of inner fade or false |
| shutterSpeed | 150 | Speed of shutter fadein or false; applies only if image proportions are different from container |
| showFade | 300 | Speed of fade in for mouse over |
| hideFade | 300 | Speed of fade out for mouse over |
| flyOutSpeed | false | Speed for flyout or false to disable |
| flyOutTransition | 'linear' | Transition of the flyout |
| flyOutOpacity | 0.6 | Initial opacity for flyout |
| flyBackSpeed | false | Speed for fly back or false to disable |
| flyBackTransition | 'linear' | Transition type of the fly back |
| flyBackOpacity | 0.2 | Final opacity of fly back |
| autoScroll | false | Scroll page when clicked on the thumb and the mouse over preview image is not fully visible |
| smoothMove | 2 | Integer bigger than 1 indicates smoother movements; set 0 to disable |
| tint | false | Color value around the lens or false |
| tintOpacity | 0.3 | Opacity of the area around the lens when "tint" option is set to some color value |
| tintFilter | false |
Apply filter to the image, e.g. "blur", "grayscale", "sepia", "invert", "saturate"; see also .axZm_mouseOverEffect>img CSS
|
| tintLensBack | true | Show background image in the lens |
| showTitle | false | Enable / disable title on zoom window |
| titleOpacity | 0.5 | Opacity of the title container |
| titlePosition | 'top' | Position of the title, top or bottom |
| cursorPositionX | 0.5 | Cursor over lens horizontal offset, 0.5 is middle |
| cursorPositionY | 0.55 | Cursor over lens vertical offset, 0.5 is middle |
| touchClickAbort | 500 | Time in ms after which click is aborted without touch movement and mousehover is initialized |
| loading | true | Display loading information, CSS .mouseOverLoading |
| loadingMessage | 'Loading...' | Loading message, not needed, can be just the spinner - see below; can be Javascript object e.g. {"en": "text english...", "de": "text german...", "fr":"text french..." |
| loadingWidth | 90 | Width of loading container |
| loadingHeight | 20 | Height of loading container |
| loadingOpacity | 1.0 |
Opacity of the loading container (the transparent background is set via png image on default, see css class)
|
| zoomHintEnable | true |
Enable zoom icon which disappears on mouse hover; css class: .axZm_mouseOverZoomHint;
If you want to change the position or the icon simply change the css class;
|
| zoomHintText | 'Zoom' | Text which will be appended next to the icon enabled by "zoomHintEnable"; can be Javascript object e.g. {"en": "text english...", "de": "text german...", "fr":"text french..."} |
| zoomMsgHover | false | Message which can appear under the mouse over zoom, css class: .axZm_mouseOverZoomMsg; can be Javascript object e.g. {"en": "text english...", "de": "text german...", "fr":"text french..."} |
| zoomMsgClick | false | Message which can appear under the mouse over zoom when the mouse enters it; can be Javascript object e.g. {"en": "text english...", "de": "text german...", "fr":"text french..."} |
| slideInTime | 200 | Ver. 4.1.1+ Slide in time if "noMouseOverZoom" is enabled or "touchScroll" option enables for touch devices |
| slideInEasingCSS3 | 'easeOutExpo' | Ver. 4.1.1+ 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 |
| slideInEasing | 'easeOutExpo' | Ver. 4.1.1+ jQuery easing function for sliding in (fallback if CSS3 animation is not supported) |
| slideInScale | 0.8 | Ver. 4.1.1+ Scale initial size (goes to 1.0 while animation) |
| slideOutScale | 0.8 | Ver. 4.1.1+ Scale slideout size |
| slideOutOpacity | 0.5 | Ver. 4.1.1+ Slideout opacity |
| slideOutDest | 1 | Ver. 4.1.1+ Target slideout position, possible values: 1, 2 or 3 |
| onInit | null | Callback function |
| onLoad | null | Callback function |
| onImageChange | null | Callback function |
| onMouseOver | null | Callback function |
| onMouseOut | null | Callback function |
| spinner | true | Use ajax loading spinner without gif files etc |
| spinnerParam | {} |
Spinner options, for more info see: https://fgnass.github.com/spin.js/
Defaults:
spinnerParam: {
lines: 11, // The number of lines to draw
length: 3, // The length of each line
width: 3, // The line thickness
radius: 4, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: "#FFFFFF", // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 90, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: "spinner", // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 0, // Top position relative to parent in px
left: 1 // Left position relative to parent in px
}
|
|
| Documentation last updated: 2016-07-03 |
