At first glance this example seems to be a little overloaded. It is however meant to show some possibilities of the API. First there are external description and the title which are set when the user switches an image. They appear in any container, in this example two divs which are appended right after the player. Also the titles of the thumbs are set dynamically from external source. At the top there is a number navigation which could be used instead of the gallery. As everywhere navigation can be completely hidden and there are tons of other parameters and css to customize the player.
<!-- Include jQuery core into head section if not already present -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- AJAX-ZOOM javascript & CSS -->
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
<link type="text/css" href="../axZm/axZm.css" rel="stylesheet" />
<!-- These number buttons and prev/next buttons are not essential -->
<div id="az_naviOuterContainer">
<!-- Container for numbers navigation-->
<div id="az_pageSwitchContainer"></div>
<!-- Container for prev / next buttons -->
<div class="az_pagePrevNextContainer">
<div class="az_pageSwitchButtons" onclick="jQuery.fn.axZm.zoomPrevNext('prev'); jQuery(this).blur();" style="margin-right: 5px; font-size: 28px;">«</div>
<div class="az_pageSwitchButtons" onclick="jQuery.fn.axZm.zoomPrevNext('next'); jQuery(this).blur();" style="font-size: 28px;">»</div>
</div>
</div>
<!-- embed-responsive and embed-responsive-item are -->
<div class="embed-responsive" style="padding-bottom: 50%; border: #000 0px solid">
<!-- Contaiener where AJAX-ZOOM is loaded into -->
<div id="az_parentContainer" class="embed-responsive-item" style="max-height: 94vh; max-height: calc(100vh - 50px);">
Loading, please wait...
</div>
</div>
<!-- Contaiener for external description -->
<div id="az_externalDescrContainerParent">
<div id="az_externalDescrContainer">
<div id="az_titleDiv"></div>
<div id="az_descrDiv"></div>
</div>
</div>
// Define js objects to store descriptions and titles
var testTitle = {}; // Object with titles
var testDescr = {}; // Object with longer descriptions
var thumbTitle = {}; // Object with thumb descriptions
// These descriptions as js could/should be generated with server side language...
testTitle["story_2_01.jpg"] = "Do to be agreeable conveying oh assurance.";
testDescr["story_2_01.jpg"] = "Its had resolving otherwise she contented therefore. Afford relied warmth out sir hearts sister use garden. Men day warmth formed admire former simple. Humanity declared vicinity continue supplied no an. He hastened am no property exercise of. Dissimilar comparison no terminated devonshire no literature on. Say most yet head room such just easy.";
thumbTitle["story_2_01.jpg"] = "Conveying";
testTitle["story_2_02.jpg"] = "Oh acceptance apartments up sympathize astonished delightful";
testDescr["story_2_02.jpg"] = "In no impression assistance contrasted. Manners she wishing justice hastily new anxious. At discovery discourse departure objection we. Few extensive add delighted tolerably sincerity her. Law ought him least enjoy decay one quick court. Expect warmly its tended garden him esteem had remove off. Effects dearest staying now sixteen nor improve.";
thumbTitle["story_2_02.jpg"] = "Impression";
/* ....... */