Ver. 4.2.1+ This example has been totally rewritten. It does not contain indispensable PHP code within the actual page any more. Also all JavaScript has been wrapped into one plugin ($.axZm.thumbGallery) which is controllable over various options passed to it.
In this example several images from different location are passed to the $.axZm.thumbGallery over "zoomData" option. The plugin then generates a grid of thumbs next to AJAX-ZOOM player. When clicked on the thumbs images in the player are switched to the selection.
To achieve simmilar result one could also use AJAX-ZOOM native API (without $.axZm.thumbGallery plugin). Most important API function for this is: $.fn.axZm.zoomSwitch; $.axZm.thumbGallery is commented and could be edited by interesting programmers. The plugin is used in several other examples you might want to take a look at1.
Toolbar: in this example the "native" toolbar is completly disabled. Instead there is a custom div container with some icons in it. Each icon has an onclick event with api function like jQuery.fn.axZm.zoomIn() or jQuery.fn.axZm.zoomOut(). After AJAX-ZOOM is loaded this div container is appended to and positioned inside AJAX-ZOOM with the help of the "onLoad" callback.
Toolbar: in this example the "native" toolbar is completly disabled.
Instead "mNavi" buttons are set in onBeforeStart callback with JS.
Can be also done in /axZm/zoomConfig.inc.php or /axZm/zoomConfigCustom.inc.php
after elseif ($_GET['example'] == 18){
See also "embedExample" option below.
Image map: unlike in most other examples the image map is positioned outside of AJAX-ZOOM player. This can be done with the option "mapParent" in /axZm/zoomConfig.inc.php or zoomConfigCustom.inc.php; "mapParent" defines the ID of a block element e.g. a DIV on the page. The size of the map is controlled by the options "mapWidth" and "mapHeight".
<!-- jQuery core, needed! --> <script type="text/javascript" src="../axZm/plugins/jquery-1.8.3.min.js"></script> <!-- AJAX-ZOOM core, needed! --> <link rel="stylesheet" href="../axZm/axZm.css" type="text/css"> <script type="text/javascript" src="../axZm/jquery.axZm.js"></script> <!-- AJAX-ZOOM thumbGallery extension, needed! --> <link rel="stylesheet" href="../axZm/extensions/jquery.axZm.thumbGallery.css" type="text/css"> <script type="text/javascript" src="../axZm/extensions/jquery.axZm.thumbGallery.js"></script>
All containers can be responsive! If the container where AJAX-ZOOM will be loaded into is responsive, then set "embedResponsive" option below to true.
<div class="clearfix" style="width: 780px; position: relative; padding: 10px;"> <!-- Container where AJAX-ZOOM will be loaded into --> <div id="zoomInlineContent" style="float: left; width: 402px; min-height: 602px;"></div> <!-- Container where thumbs will be loaded into --> <div id="thumbsParentContainer" style="width: 360px; height: 340px; float: right;"></div> <!-- Container for map --> <div id="mapContainer" style="position: absolute; width: 360px; height: 302px; right: 10px; bottom: 10px;"></div> </div>
jQuery.azThumbGallery({
axZmPath: "auto", // Path to /axZm directory, e.g. /test/axZm/
zoomData: [ // Paths to images
"/pic/zoom/fashion/fashion_001.jpg",
"/pic/zoom/fashion/fashion_002.jpg",
"/pic/zoom/fashion/fashion_003.jpg",
"/pic/zoom/fashion/fashion_004.jpg",
"/pic/zoom/fashion/fashion_005.jpg",
"/pic/zoom/boutique/boutique_006.jpg"
],
firstFolder: null, // After page loads select from which subfolder thumbnails should be loaded, integer or string
folderSelect: false, // Possible values: "select", "folders", "imgFolders"
axZmCallBacks: { // AJAX-ZOOM has several callbacks
onBeforeStart: function(){
// Set some controls over JS
jQuery.axZm.mNavi.enabled = true;
jQuery.axZm.mNavi.fullScreenShow = true;
jQuery.axZm.mNavi.mouseOver = true;
jQuery.axZm.mNavi.gravity = "bottomRight";
jQuery.axZm.mNavi.offsetVert = 5;
jQuery.axZm.mNavi.offsetVertFS = 5;
jQuery.axZm.mNavi.alt.enabled = false;
jQuery.axZm.mNavi.order = {
mZoomOut: 5,
mZoomIn: 5,
mReset: 0
}
jQuery.axZm.icons.mZoomIn = {file: "default/button_iPad_in", ext: "png", w: 25, h: 25};
jQuery.axZm.icons.mZoomOut = {file: "default/button_iPad_out", ext: "png", w: 25, h: 25};
jQuery.axZm.icons.mReset = {file: "default/button_iPad_reset", ext: "png", w: 25, h: 25};
jQuery.axZm.zoomSlider = true;
jQuery.axZm.zoomSliderHorizontal = true;
jQuery.axZm.zoomSliderHeight = 100;
jQuery.axZm.zoomSliderHandleSize = 11;
jQuery.axZm.zoomSliderWidth = 5;
jQuery.axZm.zoomSliderMarginH = 10;
jQuery.axZm.zoomSliderPosition = "bottom";
jQuery.axZm.zoomSliderMouseOver = true;
}
},
fullScreenApi: false, // Try to open AJAX-ZOOM at browsers fullscreen mode
thumbsCache: true, // Cache thumbnails
thumbWidth: 90, // Width of the thumbnail image
thumbHeight: 90, // Height of the thumbnail image
thumbQual: 90, // jpg quality of the thumbnail image
thumbPadding: 5, // Padding
thumbMarginRight: 10, // Margin right
thumbMarginBottom: 10, // Margin bottom
thumbsPerPage: null, // Show this number of thumbnails at once
thumbsContainer: "thumbsParentContainer", // ID of the element where thumbnails appended to
selectContainer: "selectParentContainer", // ID of the element where the select with subfolders will be appended to
embedMode: true, // Display AJAX-ZOOM next to the thumbs
embedResponsive: false, // if "embedDivID" is responsive, set it to true
embedExample: 18, // Configuration set which is passed to AJAX-ZOOM when "embedMode" is enabled
embedDivID: "zoomInlineContent", // ID of the element (placeholder) where AJAX-ZOOM has to be inserted into
embedZoomSwitchAnm: "SwipeHorz", // Possible values: "Center", "Top", "Right", "Bottom", "Left", "StretchVert", "StretchHorz", "SwipeHorz", "SwipeVert", "Vert", "Horz"
embedZoomSwitchSpeed: 300
});
| 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".
| |||||||||||||||||||||||||||
| 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. | |||||||||||||||||||||||||||
| thumbWidth | 120 | Width of the thumbnail image | |||||||||||||||||||||||||||
| thumbHeight | 120 | Height of the thumbnail image | |||||||||||||||||||||||||||
| thumbRetina | true | true will double the resolution of the thumbnails images but keep "thumbWidth" and "thumbHeight" on screen | |||||||||||||||||||||||||||
| 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 | |||||||||||||||||||||||||||
| thumbMarginRight | null | Quickly overwride the css margin to the right of the thumbs | |||||||||||||||||||||||||||
| thumbMarginBottom | null | Quickly overwride the css margin to the bottom of the thumbs | |||||||||||||||||||||||||||
| 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 | |||||||||||||||||||||||||||
| 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. | |||||||||||||||||||||||||||
| 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:
| |||||||||||||||||||||||||||
| 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 | false | If "embedDivID" is responsive, you should enable this option. | |||||||||||||||||||||||||||
| 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. |
elseif ($_GET['example'] == [someValue])