example15_vr9.php HOME Examples overview Download Ask a question / privacy policy / imprint
example17.php

AJAX-ZOOM - no toolbar, "image map" outside, zoom slider enabled, custom navi using API functions. Responsive ready!

This example is about the "image map" placed outside of the viewer. An "image map" defines as a small representation of the image where the user sees what part of the large image is visible in the zoomed viewport of the viewer. The user can also drag the small rectangular indicator within the "image map" and by doing so, pan the large, zoomed image in the viewer.

The default placement of the "image map" is inside the viewer at an adjustable corner. In this example, the "image map" displays outside of the zoom viewer.

Test: - display the above AJAX-ZOOM "image map" in place of the selected thumbnail image.

$.axZm.thumbGallery extension

In this example, several images from different locations hand over to the AJAX-ZOOM $.axZm.thumbGallery extension by the zoomData option. This option is one of many available for the $.axZm.thumbGallery extension. Instead of defining the image paths for each image separately, you can also set the "zoomDir" option to load all images from a specified folder automatically. While loading, the extension instantly generates thumbnails of the high-resolution images and arranges them in a responsive grid next to the viewer. You can choose the transition type for switching between images.

To achieve a similar result without utilizing the $.axZm.thumbGallery extension, you could also use the AJAX-ZOOM native API methods. The most important method is $.fn.axZm.zoomSwitch. It allows you to control the switching between images from outside of the viewer. With the $.fn.axZm.loadAjaxSet method it is furthermore possible to load a different set of images into the already loaded instance of the gallery.

The $.axZm.thumbGallery, however, is commented and you can take the extension as the basis to create your custom functionality. Besides this example, several other examples use the $.axZm.thumbGallery extension. Therefore, before declaring a functionality as missing, you might want to view other examples and inspect the options of the extension1.

Toolbar

In this example, the "native" toolbar is completly disabled. Instead, the mNavi buttons are set in onBeforeStart callback within the JavaScript code that initiates the extension. You can also set it in /axZm/zoomConfig.inc.php or in /axZm/zoomConfigCustom.inc.php file after elseif ($_GET['example'] == 18) {. See also the "embedExample" option below.

Image map

Unlike in most other examples, in this one, the image map locates outside of the AJAX-ZOOM viewer. The name of the AJAX-ZOOM option that does it is mapParent. You can find it initially defined in /axZm/zoomConfig.inc.php. The option sets the ID of a block element where the map should fit inside. Accordingly, that element can be anywhere. In this example, the mapParent option is set in onBeforeStart callback within the initiation code of the extension - jQuery.axZm.mapParent = 'mapContainer'; and not within a PHP configuration file. You can do that with some AJAX-ZOOM options.

The $.axZm.thumbGallery extension also has an option that places the "image map" over or seemingly in place of the selected thumbnail image! If that option is enabled, the JavaScript code of the extension changes the mapParent option whenever an image switches. In this particular layout, however, we have chosen to hide the AJAX-ZOOM "image map" on small screens (below 991px) by a @media CSS rule.

JavaScript & CSS files


<!-- jQuery core, needed if not already present! -->
<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">
<link rel="stylesheet" href="../axZm/extensions/jquery.axZm.azGrid.css" type="text/css">
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.thumbGallery.js"></script>
			

Example layout

HTML markup in body

All containers can be responsive! If the container where AJAX-ZOOM loads into is responsive, you must set the embedResponsive option below to true.


<div class="row" id="outerParent">
	<div class="col-md-6" id="outerLeft">
		<!-- Container where AJAX-ZOOM will be loaded into -->
		<div id="zoomInlineContent"></div>
	</div>
	<div class="col-md-6" id="outerRight">
			<!-- Container where thumbs will be loaded into -->
			<div id="thumbsParentContainer"></div>

			<!-- Container for map -->
			<div id="mapContainer" style=""></div>
	</div>
</div>
			

JavaScript

					
				

$.azThumbGallery - documentation (options)

OptionDefaultDescription
axZmPath 'auto' The path to the "/axZm" folder, 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 A 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 the thumbnails should load first. As an integer (index of subfolder) or string (name of the subfolder). If nothing is defined and there is no hash value (see "setHash" option below), the first subfolder loads first.
zoomData null As an alternative to the "zoomDir" option, where all images from a folder or subfolders are loading, you can define several images from different folders. The value of the "zoomData" option can be CSV string separated with "|".
folderIconPrefix 'folder_icon_' This option applies if the value of the "folderSelect" option is "folders". The value of this option is the prefix of an 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 applies only if the value of the "folderSelect" option is "imgFolders".
OptionDefaultDescription
thumbNumber 3 amount of icons to show, max 3
thumbWidth 32width of the icons
thumbHeight 32 height of the icons
thumbRetina true true doubles 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, https://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart. If you want to extend the functionality of the AJAX-ZOOM viewer by using those callbacks, you can define them in this object.
fullScreenApi false Try to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers except for IE < 10 and mobile
setHash false Set location hash when users navigate between the folders. Setting the location hash results in switching between folders when the user hits the back browser button. Also if the location address is copied with the hash, the folder in the hash opens as first.
thumbModel 'grid' Type of thumbnails layout. Possible values are 'grid' and 'fixed'.
When "fixed", the "thumbWidth" and "thumbHeight" options determine a fixed size of the thumbnails.
When "grid", the size is determined depending on the resolution, width of the parent container and the number of thumbnails, which should display in one row. You can define the numbers in the "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 at the top position within the thumbnails container. This option might be useful if you define the descriptions for the thumbnails.
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 to do with bootstrap. However, the breakpoints are set the same as they are in Bootstrap 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
That is sufficient to cover any resolution. Thus, azGrid-8-xl means 8 thumbnails in one row at a 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" option values 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 required.
thumbUlClassFixed 'azFixedThumb' CSS class for the UL element, when "thumbModel" option value is "fixed".
thumbGridSizes [...] Possible physical sizes of the thumbnail images, when the "thumbModel" option value is "grid". The script instantly chooses the right size depending on pixel density and thumbnails 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 the width, "h" is the height and "q" is the jpeg quality. The thumbnails are genereted instantly.
thumbWidth 120 The width of the thumbnail image, when the value of "thumbModel" option is "fixed".
thumbHeight 120 The height of the thumbnail image, when the value of "thumbModel" option is "fixed".
thumbRetina true Doubles the resolution of the thumbnails images for high DPI screens, when the value of "thumbModel" option is "fixed".
thumbsCache true Cache thumbnails.
thumbQual 90 The jpg quality of the thumbnail images.
thumbMode false Geometry of the thumbnails. Possible values are: "contain", "cover" or false
thumbBackColor '#FFFFFF' Background color of the thumbnails if "thumbMode" is set to "contain".
thumbPadding null Quickly overwrite the CSS padding of the thumbnails, when the value of "thumbModel" option is "fixed".
thumbMarginRight null Integer or null. Quickly overwrite the CSS margin to the right of the thumbs, when the value of "thumbModel" option is "fixed".
thumbMarginBottom null The value can be an integer or null. Quickly overwrite the CSS margin to the bottom of the thumbs, when the value of "thumbModel" option is "fixed".
thumbCss {} Quickly add any CSS by extending the style attribute (inline CSS) for the thumbnails.
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". This is a legacy option.
thumbPreloadingClass 'azThumbPreLoader' Layer with CSS class, which will appear before the thumbs are loaded, when the value of "thumbModel" option is "grid".
thumbDescrObj {} An object that contains thumbnail descriptions, e.g.:

		{
			"image1.jpg": "test 1",
			"image2.jpg": "test 2"
		}
		
Instead of writing out image names, you can also reference them by the index starting from one, e.g.

		{
			1: "test 1",
			2: "test 2"
		}
		
thumbDescr [] This option is an alternative or amendment to the "thumbDescrObj" option. The option is an array, and it may contain these elements: "fileName", "thumbDescr", "fullDescr". The values for "thumbDescr" and "fullDescr" are returned from request to AJAX-ZOOM. On default, "thumbDescr" returns resolution of the original image. It is adjustable in /axZm/zoomConfig.inc.php or a different configuration file by setting the $zoom['config']['galleryThumbDesc'] and $zoom['config']['galleryThumbFullDesc'] AJAX-ZOOM core configuration options. You can see the usage of this option in example11.
thumbDescrJoin '<br>' If the return from "thumbDescrObj" and "thumbDescr" has more than one element, they are split by this string.
thumbDescrTruncate false Truncate the resulting description by the number of chars that you define in this option and add [...] at the end. Set to false to disable truncating.
thumbsPerPage null In case the number of thumbnails exceeds the "thumbsPerPage" value, the extension appends "page numbers" (pagination) under the container with the thumbnails. Set to null to disable pagination.
thumbsPerPageResponsive null If this option is activated, the number of thumbnails per page depends on screen size. The exact values are defined in the "thumbsPerPageNumber" option. If enabled, the "thumbsPerPage" option overrides the "thumbsPerPageResponsive" option and makes the amount of the thumbnails in a row not responsive.
thumbsPerPageRows 1 The number of rows if "thumbsPerPageResponsive" option is active. Depending on the resolution, the number of thumbnails in each row is defined by the "thumbsPerPageNumber" option.
thumbsPerPageNumber {...} An object that contains pairs of keys and values representing the screen resolution breakpoints and number of thumbnails when "thumbsPerPageResponsive" option is enabled. 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. The "w" and "h" arguments are passed to the functions, which represent the width and height of the current browser's 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 
				}]
			]
		
pageNavPosition 'bottom' Position of the pagination container. Possible values are: "bottom" ot "top".
thumbsContainer 'thumbsParentContainer' The ID of the container where into thumbnails should be inserted. The container can be responsive or adaptive.
selectContainer 'selectParentContainer' The ID of the container where into the folders navigation (see "folderSelect" option) should be inserted. The container can be responsive or adaptive.
ajaxZoomOpenMode 'fullscreen' This option determines how AJAX-ZOOM should open when the user clicks on an image thumbnail. 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 a regular fixed width and height Fancybox
  • 'colorbox' - AJAX-ZOOM opens in Colorbox with fixed width and height. Colorbox used to be another popular lightbox plugin
  • 'zoomSwitch' - In case "embedMode" is enabled, which means that AJAX-ZOOM opens next to the container with the thumbnails, clicking on the thumb switches the image within AJAX-ZOOM viewer. This value is set instantly if "embedMode" is enabled.
openModeEnforceFullscreen 1024 Instantly set "ajaxZoomOpenMode" to fullscreen if the 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, this object represents the Fancybox options .
colorBoxParam {} If colorbox is used in "ajaxZoomOpenMode" option, this object represents the Colorbox options .
embedMode false Display AJAX-ZOOM next to the thumbs. Please see below this list to find out in which examples this option applies.
embedDivID '' This option applies when "embedMode" is enabled. The value is the ID of a container where the script should append the AJAX-ZOOM viewer. In case the "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 the user clicks on a thumbnail, the image inside AJAX-ZOOM switches with one of the following effects: "Center", "Top", "Right", "Bottom", "Left", "StretchVert", "StretchHorz", "SwipeHorz", "SwipeVert", "Vert", "Horz";
embedZoomSwitchSpeed 300 Set speed (duration) of switching. This option overrides the following AJAX-ZOOM internal options: galleryFadeInSpeed, galleryInnerFade, gallerySlideSwipeSpeed. Set the value to "embedZoomSwitchSpeed" to diable this overriding.
embedSwitchWithPage true If "thumbsPerPage" is activated and page numbers are present, then clicking on the page number switches to the first image shown on that page.
embedFirstImage 1 When gallery loads first, the index (number) or a file name which should load first. See also the "firstFolder" option.
Last updated: 2019-02-08
1 examples where $.azThumbGallery is used:
  • example5.php
  • example7.php
  • example8.php
  • example11.php
  • example16.php
  • example21.php
2 you will find the respective configuration set in /axZm/zoomConfigCustom.inc.php after
elseif ($_GET['example'] == [someValue])
There you can change existing options or copy from /axZm/zoomConfig.inc.php other options to change the values.

Comments (0)

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.
Load other examples in slider