example10.php HOME Examples overview Download Ask a question


Ver. 4.2.1+ This example has been replaced with a different one because the old example simply got obsolete. The new $.azThumbGallery extension is integrated into responsive layout and it does not require any PHP code within the actual page. A slightly modified and optional third party $.split plugin has been added allowing users to change the predefined size of the "windows".

JavaScript & CSS files in Head

<!-- jQuery core -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

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

<!-- AJAX-ZOOM gallery extension -->
<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>

<!-- jQuery splitter plugin for changing the size of the "windows" -->
<link rel="stylesheet" href="../axZm/plugins/demo/jquery.splitter/css/jquery.splitter.css" />
<script type="text/javascript" src="../axZm/plugins/demo/jquery.splitter/js/jquery.splitter-0.14.0.js"></script>

CSS in Head (can be put into a css file)

/* CSS for layout */
#splitLayoutParent{position: absolute; width: 100%; top: 58px; bottom: 0;}
#zoomInlineContent{position: absolute; width: 50%; height: 100%; overflow: hidden; z-index: 1;}
#rightHalf{position: absolute; width: 50%; height: 100%; right: 0; background-color: #EEE; z-index: 1; overflow-x: hidden;}
#rightFoldersParent{position: absolute; height: 180px; top: 0; overflow-x: hidden; overflow-y: auto;}
#rightThumbsParent{position: absolute; bottom: 0; overflow-x: hidden; overflow-y: auto;}

	display: none;

HTML makup in body

All containers are responsive in this example! Note that "embedResponsive" option below is set to true.

<div id="splitLayoutParent">
	<!-- This is where AJAX-ZOOM will be inserted into -->
	<div id="zoomInlineContent"></div>

	<!-- Parent container for folders and thumbs -->
	<div id="rightHalf">
		<div id="rightFoldersParent">
			<!-- This is where folders or select element will be inserted into -->
			<div id="selectParentContainer" style="padding: 10px;"></div>

		<div id="rightThumbsParent">
			<!-- This is where thumbnails will be inserted into -->
			<div id="thumbsParentContainer" style="padding: 10px;"></div>


	// Get overall height of the right side
	var rightHalfHeight = $("#rightHalf").height(),

	// Height is initially set as px
	rightFoldersParentHeight = $("#rightFoldersParent").height(),

	// Height converted to %
	prcHeightFolders = Math.ceil(rightFoldersParentHeight / rightHalfHeight * 100);

	// Set height as %
	$("#rightFoldersParent").css("height", prcHeightFolders + "%");
	$("#rightThumbsParent").css("height", (100 - prcHeightFolders) + "%");

	// Splitter between folders and thumbnails
		orientation: "horizontal", 
		limit: 120,
		position: prcHeightFolders + "%"

	// Splitter between left and right side
		orientation: "vertical", 
		limit: 400,
		position: "50%",
		onDragStart: function(){
		onDragEnd: function(){

	// Init AJAX-ZOOM gallery extension
		axZmPath: "../axZm/", // Path to /axZm directory, e.g. /test/axZm/
		zoomDir: "/pic/zoom", // Path to subfolders with images
		firstFolder: "boutique", // After page loads select from which subfolder thumbnails should be loaded, integer or string
		folderSelect: "folders", // Possible values: "select", "folders", "imgFolders"
		axZmCallBacks: {}, // AJAX-ZOOM has several callbacks
		fullScreenApi: false, // Try to open AJAX-ZOOM at browsers fullscreen mode
		thumbsCache: true, // Cache thumbnails
		thumbWidth: 110, // Width of the thumbnail image
		thumbHeight: 110, // Height of the thumbnail image
		thumbQual: 90, // jpg quality of the thumbnail image
		thumbPadding: 5, // Padding 
		thumbMarginRight: 5, // Margin right
		thumbMarginBottom: 18, // Margin bottom
		thumbsPerPage: null, // Show this number of thumbnails at once
		thumbDescr: ["fileName"], // Show filename under thumbs
		thumbDescrTruncate: 25, // Trancate filename string after 25 chars
		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: true, // if "embedDivID" is responsive, set it to true
		embedExample: 9, // 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


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".
thumbNumber 3 amount of icons to show, max 3
thumbWidth 32width 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.
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:
  • '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;
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.
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.