example24.php HOME Examples overview Download Ask a question
example26.php

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

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

HTML markup in body


<!-- 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;">&#171;</div>
		<div class="az_pageSwitchButtons" onclick="jQuery.fn.axZm.zoomPrevNext('next'); jQuery(this).blur();" style="font-size: 28px;">&#187;</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>
			

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

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

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.