example24.phpHOMEExamples overviewDownloadAsk a question

AJAX-ZOOM - external description of the gallery images

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.

Loading, please wait...
Photos by: Carsten Klein

Javascript & CSS files in head

<!--  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" />

Additional CSS for this example

	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;

	width: 500px; min-height: 25px; font-size: 10pt; color: #FFFFFF; padding-top: 5px; float: left;

	width: 230px; min-height: 25px; font-size: 10pt; color: #FFFFFF; padding-top: 5px; float: left;

	width: 710px; min-height: 108px; padding: 5px 10px 10px 10px; background-color: #000; 		

	min-height: 50px; font-size: 10pt; color: #FFFFFF; 

#az_descrDiv a{
	color: #FFFFFF; font-weight: bolder;

	min-height: 40px; font-size: 16pt; color: #D3D3D3; 

HTML markup in body

<!-- 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>

<!-- 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> 

Javascript defining the descriptions

// 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";

/* ....... */

Javascript additional functions and callbacks

// Simple function to put descriptions in a div with fade effect
function ajaxZoomAnimateDescr(title, descr){
	jQuery("#az_titleDiv").fadeTo(300,0, function(){
	jQuery("#az_descrDiv").fadeTo(300,0, function(){

// Set numbers navigation
function ajaxZoomSetNumbers(){
	if (!jQuery.axZm){return false;}
	jQuery.each(jQuery.axZm.zoomGA, function (k, v){
		jQuery("<div />")
		.attr("id", "az_pageSwitchButtons_"+k)
		.bind("click", function(){jQuery.fn.axZm.zoomSwitch (k)})

// 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

		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"];
		ajaxZoomAnimateDescr(testTitle[getImgName], testDescr[getImgName]);
		jQuery(".az_pageSwitchButtons").css({backgroundColor: "#1D1D1A"});
		jQuery("#az_pageSwitchButtons_"+jQuery.axZm.zoomID).css({backgroundColor: "green"});

	opt: ajaxZoom.opt,
	path: ajaxZoom.path,
	parameter: ajaxZoom.parameter,
	divID: ajaxZoom.divID

Comments (1)

Matt Magi
2011-12-22 22:35:07
Matt Magi
Wow this is pretty impressive, would be great for realtors!

Leave a Comment

Name (required):
Email (required):
Your comment (no html):
Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, Your personal image will be attached every time you comment.