At first glance, this example seems overloaded with user interfaces and information. It is, however, there to evoke some possibilities of the API when dealing with image descriptions. Below the main viewer, there are title and description of the image. They appear in an HTML container, which is not part of the viewer. The content of this container is what it is mainly about in this example.
AJAX-ZOOM has event hooks where you can place your custom JavaScript code and let execute it just in the right moment.
The onImageChange event returns information about the image that loads in the player after each switching.
It is enough to set appropriate tile and description of this image.
You can use this code as is, remove unneeded parts or as developer extend the code with even more functionality.
There is a detailed explanation of the logic and the custom code is commented.
What we do within this onImageChange hook function in this particular example is mainly replacing the title and the description of the containers below the viewer.
With just a few lines of code, the custom hook function determines the filename of the current image.
It then looks into external JavaScript JSON / object for information about title and description of that image.
Finally, it replaces both in the HTML containers.
Obviously, the source of this external JavaScript object is something you would need to pull out of some database table in your system or define manually for testing.
Since the containers for title and description are outside of the viewer, they are not visible when the viewer enters into the fullscreen mode.
The code "catches" that transition from layout to fullscreen mode by using the onFullScreenStartFromRel event hook.
At this moment, it moves the description and title containers inside the viewer
by appending the containers to the AJAX-ZOOM internal layer with ID axZm_zoomLayer.
This is the layer inside AJAX-ZOOM viewer, to which besides descriptions you can append any other HTML elements.
If you are moving an HTML element from outside to axZm_zoomLayer container and want it there to display differently, you can always use CSS for this.
E.g. #axZm_zoomLayer > #id_of_ custom_html_element {…}.
You could also add a CSS class name to the element before moving it into AJAX-ZOOM axZm_zoomLayer container
and remove this additional CSS class name when detaching it from there.
In this example, the code uses onFullScreenCloseFromRel event hook
to place the tile and description to where they were before the viewer went into full-screen mode.
The code also illustrates that you can automatically build custom UI elements out of data provided by the API of the viewer.
As an example, there are numbered buttons for each image in the viewer.
The code creates these buttons using $.axZm.zoomGA object.
This object contains information about the gallery images.
It iterates over each of the properties and inserts HTML buttons into some parent HTML container.
On click, the AJAX-ZOOM API method $.fn.axZm.zoomSwitch switches images by their numbers.
The onImageChange hook described above triggers simultaneously to calling the $.fn.axZm.zoomSwitch method,
so that the description and title change as intended.
This custom code for building the buttons needs to execute once in AJAX-ZOOM onLoad event hook.
Otherwise, there would be no data available in $.axZm.zoomGA object.
<!-- Include jQuery core into head section if not already present -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/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";
/* ....... */
Wow this is pretty impressive, would be great for realtors!