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="http://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_013.jpg",
						"/pic/zoom/boutique/boutique_014.jpg",
						"/pic/zoom/fashion/fashion_002.jpg",
						"/pic/test/hb/i7a0125.jpg",
						"/pic/test/hb/i7a1445.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);