In the HTML markup below we simplified by setting the height to a fixed pixel value. In your CSS layout, if you want to the height to be responsive, please make sure that the parent container is responsive too / has calculated height. Then you could set the height of "axZmPlayerContainer" to 100%; Otherwise you will not see anything! Indeed in this example we have set the CSS height of one of the nested parent containers to calc(100vh - 110px - 58px - 10px) which is 100% body height minus some other values...

Javascript and CSS files in head

							<!--  Include jQuery core into head section if not already present -->
							<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

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

HTML Markup

							<!-- Container where AJAX-ZOOM will be loaded into -->
						<div id="axZmPlayerContainer" style="width: 100%; height: 500px; background-color: #FFF; position: relative;"></div>

Javacript

							// Define some var to hold AJAX-ZOOM related values
							window.ajaxZoom = {};

							// Path to /axZm/ folder, adjust the path in your implementaion
							ajaxZoom.path = "../axZm/";

							// Define the ID of the responsive container
							ajaxZoom.targetID = "axZmPlayerContainer";

							// Images to load
							ajaxZoom.zoomData = [
								"/pic/zoom/boutique/boutique_001.jpg",
								"/pic/zoom/boutique/boutique_002.jpg",
								"/pic/zoom/boutique/boutique_003.jpg",
								"/pic/zoom/boutique/boutique_004.jpg",
								"/pic/zoom/boutique/boutique_005.jpg",
								"/pic/zoom/boutique/boutique_006.jpg",
								"/pic/zoom/boutique/boutique_007.jpg",
								"/pic/zoom/boutique/boutique_008.jpg",
								"/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"
							];

							// "example" in query string which is passed to AJAX-ZOOM defines an options set
							// which differs from default values. You can find the options set of this example 
							// in /axZm/zoomConfigCustom.inc.php after 
							// elseif ($_GET['example'] == 23)
							ajaxZoom.queryString = "example=23";

							// Pass images as CSV separated with '|', you could also use zoomDir to load entire directory with images instead of zoomData
							// For more information about parameters which can be passed see example27.php
							ajaxZoom.queryString += "&zoomData="+ajaxZoom.zoomData.join("|");

							// AJAX-ZOOM possible callbacks
							ajaxZoom.ajaxZoomCallbacks = {

							};

							// Enable overlay before AJAX-ZOOM loads
							window.fullScreenStartSplash = {"enable": true, "className": false, "opacity": 0.75};

							// Use jQuery.fn.axZm.openFullScreen() API to trigger AJAX-ZOOM responsive
						jQuery.fn.axZm.openResponsive(ajaxZoom.path, ajaxZoom.queryString, ajaxZoom.ajaxZoomCallbacks, ajaxZoom.targetID, true, false, false);