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="http://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" />
#az_parentContainer{
min-height: 414px; clear: both;
}
.az_pageSwitchButtons {
width: 20px; height: 20px; margin-right: 5px; float: left;
cursor: pointer; background-color: #1D1D1A; text-align: center;
line-height: 20px; border-radius: 3px 3px 3px 3px;
}
#az_pageSwitchContainer{
width: 500px; min-height: 25px; font-size: 10pt; color: #FFFFFF; padding-top: 5px; float: left;
}
#az_pagePrevNextContainer{
width: 230px; min-height: 25px; font-size: 10pt; color: #FFFFFF; padding-top: 5px; float: left;
}
#az_externalDescrContainer{
width: 710px; min-height: 108px; padding: 5px 10px 10px 10px; background-color: #000;
}
#az_descrDiv{
min-height: 50px; font-size: 10pt; color: #FFFFFF;
}
#az_descrDiv a{
color: #FFFFFF; font-weight: bolder;
}
#az_titleDiv{
min-height: 40px; font-size: 16pt; color: #D3D3D3;
}
<!-- Container for numbers navigation-->
<div id="az_pageSwitchContainer"></div>
<!-- Container for prev / next buttons -->
<div id="az_pagePrevNextContainer">
<div class="az_pageSwitchButtons" style="width: 30px; float: right;" onclick="jQuery.fn.axZm.zoomPrevNext('next')">>></div>
<div class="az_pageSwitchButtons" style="width: 30px; float: right;" onclick="jQuery.fn.axZm.zoomPrevNext('prev')"><<</div>
</div>
<!-- Contaiener where AJAX-ZOOM is loaded into -->
<div id="az_parentContainer">Loading, please wait...</div>
<!-- Contaiener for external description -->
<div id="az_externalDescrContainer">
<div id="az_titleDiv"></div>
<div id="az_descrDiv"></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";
/* ....... */
// Simple function to put descriptions in a div with fade effect
function ajaxZoomAnimateDescr(title, descr){
jQuery("#az_titleDiv").fadeTo(300,0, function(){
$(this).empty().html(title).fadeTo(300,1);
});
jQuery("#az_descrDiv").fadeTo(300,0, function(){
$(this).empty().html(descr).fadeTo(300,1);
})
}
// Set numbers navigation
function ajaxZoomSetNumbers(){
if (!jQuery.axZm){return false;}
jQuery("#az_pageSwitchContainer").empty();
jQuery.each(jQuery.axZm.zoomGA, function (k, v){
jQuery("<div />")
.addClass("az_pageSwitchButtons")
.html(k)
.attr("id", "az_pageSwitchButtons_"+k)
.bind("click", function(){jQuery.fn.axZm.zoomSwitch (k)})
.appendTo("#az_pageSwitchContainer");
});
}
// Define ajaxZoom object
var ajaxZoom = {};
// Path to the axZm folder, adjust if needed
ajaxZoom.path = "../axZm/";
// Parameter passed to AJAX-ZOOM
ajaxZoom.parameter = "zoomDir=/pic/haus_story&example=25";
// The id of the DIV where ajax-zoom has to be inserted into.
ajaxZoom.divID = "az_parentContainer";
// AJAX-ZOOM callbacks
ajaxZoom.opt = {
onLoad: function(){
// Get loaded image name, as not necessarily the first image
// must be loaded at first into the gallery
var getImgName = jQuery.axZm.zoomGA[jQuery.axZm.zoomID]["img"];
// Set title and description
ajaxZoomAnimateDescr(testTitle[getImgName], testDescr[getImgName]);
// Set titles of the thumbs in the gallery
// jQuery.fn.axZm.setDescr is API function of AJAX-ZOOM
jQuery.each(thumbTitle, function (fName, descr){
jQuery.fn.axZm.setDescr(fName, testTitle[fName], descr);
});
// Set numbers navigation
ajaxZoomSetNumbers();
jQuery("#az_pageSwitchButtons_"+jQuery.axZm.zoomID).css({backgroundColor: "green"});
},
onImageChange: function(info){
/* Set title and description on image change
Note: there are many variations possible, e.g. the descriptions could be loaded
via ajax request, you could extend this example to change the image sets like in example4.php
*/
var getImgName = jQuery.axZm.zoomGA[jQuery.axZm.zoomID]["img"];
//testTitle[info.fileName]
ajaxZoomAnimateDescr(testTitle[getImgName], testDescr[getImgName]);
jQuery(".az_pageSwitchButtons").css({backgroundColor: "#1D1D1A"});
jQuery("#az_pageSwitchButtons_"+jQuery.axZm.zoomID).css({backgroundColor: "green"});
}
};
// Init AJAX-ZOOM
jQuery.fn.axZm.load({
opt: ajaxZoom.opt,
path: ajaxZoom.path,
parameter: ajaxZoom.parameter,
divID: ajaxZoom.divID
});