<!-- 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>
					

						body {padding: 0; margin: 0; height: 100%}
						html {font-family: Tahoma, Arial; font-size: 10pt; height: 100%}
						
						/* Override some of AJAX-ZOOM css */
						#zoomNavigation{background: none repeat scroll 0 0 #eee;}
						#zoomLevel{color: #3D3D3D}

						/* 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;}
					

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

						jQuery(function($){
							// 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
							$("#rightHalf").split({
								orientation: "horizontal", 
								limit: 120,
								position: prcHeightFolders + "%"
							});

							// Splitter between left and right side
							$("#splitLayoutParent").split({
								orientation: "vertical", 
								limit: 400,
								position: "50%",
								onDragStart: function(){
									$.fn.axZm.resizeStart(30000); 
								},
								onDragEnd: function(){
									$.fn.axZm.resizeStart(1); 
								}
							});
							
							// Init AJAX-ZOOM gallery extension
							$.azThumbGallery({
								axZmPath: "auto", // 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
							});
						});
					

• example5.php
  
• example7.php
  
• example8.php
  
• example11.php
  
• example16.php
  
• example21.php