| Option | Default | Description |
|---|
| axZmPath | 'auto' | Path to /axZm directory, e.g. /test/axZm/ |
| folderSelect | 'select' |
The look of navigation for subfolders. Only useable if "zoomDir" is defined (not with "zoomData").
Possible values: "select", "folders", "imgFolders" or false
|
| zoomDir | null |
Path to subfolders with images;
If "folderSelect" is set to false, then you can define the path directly to some folder with images.
|
| firstFolder | null |
After page loads select from which "zoomDir" subfolder thumbnails should be loaded first,
integer (index of subfolder) or string (name of the subfolder). If nothitng is defined
and there is no hash value (see "setHash" option below), then first subfolder is selected instantly.
|
| zoomData | null |
Alternativly to "zoomDir", where all images from a folder or subfolders are loaded, you can define several images from different folders.
Here "zoomData" can be CSV string separated with "|";
it can also be an array or it can be an object where property values are the paths of the images.
|
| folderIconPrefix | 'folder_icon_' |
Applied if folderSelect is set to "folders".
Value is the prefix of icon image located in /axZm/icons directory.
On default the three icons are: folder_icon_close.png, folder_icon_close_over.png, folder_icon_open.png
|
| imgFoldersSettings | {} |
This option is applied only if the value of "folderSelect" option is "imgFolders".
| Option | Default | Description |
|---|
| thumbNumber | 3 | amount of icons to show, max 3 |
| thumbWidth | 32 | width of the icons |
| thumbHeight | 32 | height of the icons |
| thumbRetina | true | true will double the resolution of the thumbnails images |
| thumbQual | 100 | jpg quality of the thumbnail image |
| thumbMode | 'contain' | possible values: "contain", "cover" or false |
| thumbsCache | true | cache thumbnails |
| thumbOpacity | 1.0 | opacity |
|
| folderNameFunc | function |
This is a "filter" function for the titles of the subfolders.
The first argument passed to the function is the name of the subfolder from the file system.
This input string can be changed and returned in a different way.
On default this function makes first letter uppercase, replaces _ (underscore) to empty space
and truncates the resulting string to max. 15 characters. If you do not want to have any changes,
simply set folderNameFunc to function(input){return input;}
|
| axZmCallBacks | {} | AJAX-ZOOM has several callbacks, http://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart |
| fullScreenApi | false | Try to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers except IE < 10 and mobile |
| setHash | false |
Set location hash when users navigate between the folders.
Setting the location hash will result in switching between folders when the user hits browser backword button.
Also if the location address is copied with the hash, opening it again will load this folder at first.
|
| thumbModel | 'grid' |
Type of thumbs. Possible values are 'grid' and 'fixed'.
When "fixed", the size of the thumbnails is determined by the values of the options thumbWidth and thumbHeight.
When "grid", the size is determined depending on resolution, parent container width and number of thumbnails,
which should be displayed in one row. This is controlled by "thumbUlClassGrid" option.
|
| thumbGridAspectRatio | 1.0 |
Aspect ratio of the thumbnails if "thumbModel" is "grid".
"thumbUlClassGrid" must contain azGridThumb class.
For e.g. 16:9 format set 1.7777777777, for 2:1 -> 2.0
|
| thumbGridTop | false |
Align image inside thumb css at top. Might be useful if description is set.
|
| thumbUlClassGrid | 'azGridThumb azGrid-10-xxl azGrid-8-xl azGrid-6-lg azGrid-6-md azGrid-4-sm azGrid-2-xs' |
Class for the UL element, when "thumbModel" option value is "grid". On default, you can choose from
predefined azGrid-[1-16]-[xs, sm, md, lg, xl, xxl]. It has not much todo with bootstrap, however the breakpoints are
set same as they are in Bottstrap 3, 4. The number after azGrid- determines how many thumbnails you would like
to see in one row and the xs, sm, md, lg or xl letters determine the interval of screen resolutions. The default
screen width breakpoints are:
- xs: under 576 pixels
- sm: from 576 to 768 pixels
- md: from 768 to 992 pixels
- lg: from 992 to 1200 pixels
- xl: over 1200 pixels
- xxl: over 1900 pixels width and over 1020 pixels height
This is sufficient to cover any resolution.
Thus, azGrid-8-xl means 8 thumbnails in one row at screen width of more than 1200 pixels.
azGrid-6-lg menas 6 thumbnails in one row at screen width between 992 to 1200 pixels etc.
The CSS can be changed and extended.
When defining the "thumbUlClassGrid" value using azGrid-x-y CSS classes, please
cover all possible intervals (xs, sm, md, lg, xl) like it is set on default, whereby xxl is not needed.
|
| thumbUlClassFixed | 'azFixedThumb' |
CSS class for the UL element, when "thumbModel" option value is "fixed".
|
| thumbGridSizes | [...] |
Possible physical sizes of the thumbnail images, when "thumbModel" option value is "grid".
The script will instantly choose the right size depending on pixel density and thumbnail size.
The array contains objects with "w", "h" and "q" properties.
[
{"w": 100, "h": 100, "q": 90},
{"w": 200, "h": 200, "q": 90},
{"w": 400, "h": 400, "q": 80},
{"w": 600, "h": 600, "q": 75}
]
"w" is width, "h" is height and "q" is jpeg quality. The thumbnails will be genereted instantly.
|
| thumbWidth | 120 | Width of the thumbnail image, when the value of "thumbModel" option is "fixed". |
| thumbHeight | 120 | Height of the thumbnail image, when the value of "thumbModel" option is "fixed". |
| thumbRetina | true |
true will double the resolution of the thumbnails images for high DPI screens,
when the value of "thumbModel" option is "fixed".
|
| thumbsCache | true | Cache thumbnails |
| thumbQual | 90 | jpg quality of the thumbnail image |
| thumbMode | false | possible values: "contain", "cover" or false |
| thumbBackColor | '#FFFFFF' | Background color of the thumb if "thumbMode" is set to "contain" |
| thumbPadding | null |
Quickly overwrite the css padding of the thumbs, when the value of "thumbModel" option is "fixed".
|
| thumbMarginRight | null |
Integer or null. Quickly overwride the css margin to the right of the thumbs, when the value of "thumbModel" option is "fixed".
|
| thumbMarginBottom | null |
Integer or null. Quickly overwride the css margin to the bottom of the thumbs, when the value of "thumbModel" option is "fixed".
|
| thumbCss | {} | Quickly overwride any other CSS |
| thumbPreloadingImg | 'ajax-loader-map-white.gif' |
Image located in /axZm/icons directory, which will appear before the thumbs are loaded, when the value of "thumbModel" option is "fixed".
|
| thumbPreloadingClass | 'azThumbPreLoader' |
Layer with CSS class, which will appear before the thumbs are loaded, when the value of "thumbModel" option is "grid".
|
| thumbDescr | [] |
array; poaaible array elements: fileName, thumbDescr, fullDescr;
thumbDescr and fullDescr are returned from AJAX-ZOOM for regular thumbs.
On default thumbDescr returns resolution of the original image.
It is adjustable in /axZm/zoomConfig.inc.php or /axZm/zoomConfigCustom.inc.php
over $zoom['config']['galleryThumbDesc'] and $zoom['config']['galleryThumbFullDesc'] options.
|
| thumbDescrJoin | '<br>' |
If thumbDescr has more than one elemets, they will be splitted by this string
|
| thumbDescrTruncate | false |
integer - truncate each of the descriptions adding [...] or false
|
| thumbsPerPage | null |
In case the number of thumbs will exceed "thumbsPerPage" value, the extension will append "page numbers" under the thumbs.
null disables the feature.
|
| thumbsPerPageResponsive | null |
Number of thumbs per page depends on screen size, see "thumbsPerPageNumber" option.
If enabled, the "thumbsPerPage" option overrides "thumbsPerPageResponsive" option.
|
| thumbsPerPageNumber | {...} |
Object, containing key, value pairs for screen resolution breakpoints as key and number of thumbnails in a row. Default value:
{
"xs": 4,
"sm": 8,
"md": 12,
"lg": 12,
"xl": 16,
"xxl": 20
}
|
| thumbsPerPageBreakPoints | [...] |
Array, containing arrays with breakpoint and javascript function, defining the range of screen resolution.
w and h arguments are passed to the functions, which are width and height of current browser window size.
The default values match the predefined CSS grid, see "thumbUlClassGrid" option:
[
["xs", function(w, h) {
// max-width: 575.98px,
return w < 576;
}],
["sm", function(w, h) {
// min-width: 576px) and (max-width: 767.98px
return w >= 576 && w < 768
}],
["md", function(w, h) {
// min-width: 768px) and (max-width: 991.98px
return w >= 768 && w < 992
}],
["lg", function(w, h) {
// (min-width: 992px) and (max-width: 1199.98px)
return w >= 992 && w < 1200
}],
["xl", function(w, h) {
// (min-width: 1200px)
return w >= 1200;
}],
["xxl", function(w, h) {
// (min-width: 1900px) and (min-height: 1020px)
return w >= 1900 && h > 1020
}]
]
|
| thumbsContainer | 'thumbsParentContainer' |
ID of the container where thumbs should be inserted. Container can be responsive.
|
| selectContainer | 'selectParentContainer' |
ID of the container where folders navigation - "folderSelect" should be inserted. Container can be responsive.
|
| ajaxZoomOpenMode | 'fullscreen' |
Determines how AJAX-ZOOM is opened when the user clicks on the image thumbs,
possible values:
- 'fullscreen' - AJAX-ZOOM opens at fullscreen mode, see also "fullScreenApi" option
- 'fancyboxFullscreen' - AJAX-ZOOM opens in the responsive Fancybox. Fancybox is a commonly used lightbox jQuery plugin
- 'fancybox' - AJAX-ZOOM opens in regular fixed width and height Fancybox
- 'colorbox' - AJAX-ZOOM opens in Colorbox with fixed width and height. Colorbox is an other popular lightbox plugin
- 'zoomSwitch' - In case "embedMode" is enabled, which means that AJAX-ZOOM is already opened next to the thumbs,
clicking on the thumb will just switch the image within AJAX-ZOOM. This value is set instantly when "embedMode" is set to true;
|
| openModeEnforceFullscreen | 1024 |
Open at fullscreen if width of the device is below or equal to this value.
Does not apply / have no effect, if "embedMode" is enabled.
|
| exampleFullscreen | 'mouseOverExtension' | Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fullscreen' |
| exampleFancyboxFullscreen | 'mouseOverExtension' | Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fancyboxFullscreen' |
| exampleFancybox | 'modal' | Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fancybox' |
| exampleColorbox | 'modal' | Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'colorbox' |
| fancyBoxParam | {} | If fancybox is used in "ajaxZoomOpenMode" option, Fancybox options |
| colorBoxParam | {} | If colorbox is used in "ajaxZoomOpenMode" option, Colorbox options |
| | | |
| embedMode | false | Display AJAX-ZOOM next to the thumbs |
| embedDivID | '' |
ID of the container where AJAX-ZOOM player in "embedMode" should be inserted.
In case "embedDivID" is a responsive container, please set "embedResponsive" to true!
|
| embedResponsive | true | If "embedDivID" is responsive, you should enable this option. |
| embedMapInThumb | true |
Show AJAX-ZOOM "image map" in place of selected thumbnail.
Needs $.axZm.embedMapParent set via JS or $zoom['config']['embedMapParent'] in PHP file.
See example16 to view the effect.
|
| embedExample | 9 | Configuration set 1 which is passed to AJAX-ZOOM when "embedMode" is enabled |
| embedZoomSwitchAnm | 'SwipeHorz' |
When clicked on the thumbs the image inside AJAX-ZOOM will be switched with one of the following effects:
"Center", "Top", "Right", "Bottom", "Left", "StretchVert", "StretchHorz", "SwipeHorz", "SwipeVert", "Vert", "Horz";
|
| embedZoomSwitchSpeed | 300 |
Set speed (duration) of switching, overrides following AJAX-ZOOM internal options:
galleryFadeInSpeed, galleryInnerFade, gallerySlideSwipeSpeed; set to "embedZoomSwitchSpeed"
to diable this overriding.
|
| embedSwitchWithPage | true |
If "thumbsPerPage" is activated and page numbers are present, then clicking on the page number will switch to the first shown image on that page.
|
| embedFirstImage | 1 |
When gallery loads first the index (number) or file name which should be loaded first.
See also "firstFolder" option in case applied.
|
| Last updated: 2018-03-23 |
