previous exampleHome
next example

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 completly hidden and there are tons of other parameters and css to customize the player.

>>
<<
Loading, please wait...

Shortend HTML

		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
		<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		</head>
		<body>
		
		<!-- Div for numbers navigation-->
		<DIV id="testNumNav" style="min-height: 25px; font-size: 10pt; color: #FFFFFF; width: 500px; padding-top: 5px; float: left;"></DIV>
		
		<!-- Divs for prev / next API -->
		<DIV style="min-height: 25px; font-size: 10pt; color: #FFFFFF; width: 230px; padding-top: 5px; float: left;">
			<DIV class="alternNavi" style="width: 30px; text-align: center; float: right;" onclick="jQuery.fn.axZm.zoomPrevNext('next')">>></DIV>
			<DIV class="alternNavi" style="width: 30px; text-align: center; float: right;" onclick="jQuery.fn.axZm.zoomPrevNext('prev')"><<</DIV>
		</DIV>
		
		<!-- Div where AJAX-ZOOM is loaded into -->
		<DIV id="test" style="min-height: 462px; margin: 0; clear: both;">Loading, please wait...</DIV>
		
		<!-- Divs for external description -->
		<DIV style="padding: 5px 10px 10px 10px; width: 710px; background-color: #1D1D1A; margin-top: 5px"> 
			<DIV id="testTitleDiv" style="min-height: 40px; font-size: 16pt; color: #D3D3D3; width: 700px;"></DIV> 
			<DIV id="testDescrDiv" style="min-height: 50px; font-size: 10pt; color: #FFFFFF; width: 700px;"></DIV> 
		</DIV>
		
		<script type="text/javascript">
		
		// Init (php array like) js objects to store descriptions and titles
		var testTitle = {}; // Object with titles
		var testDescr = {}; // Object with longer descriptions
		var thumbTitle = {}; // Object with thumb descriptions

		testTitle["test_animals1.png"] = "Some title for image test_animals1.png";
		testDescr["test_animals1.png"] = "Some description for image with the filename test_animals1.png. ...";
		thumbTitle["test_animals1.png"] = "Thumb title 1";
		
		testTitle["test_animals2.png"] = "Some title for image test_animals2.png";
		testDescr["test_animals2.png"] = "Some description for image with the filename test_animals2.png. ...";		
		thumbTitle["test_animals2.png"] = "Thumb title 2";
		
		// Simple function to put descriptions in a div with fade effect
		function ajaxZoomAnimateDescr(title, descr){
			jQuery("#testTitleDiv").fadeTo(300,0, function(){
				$(this).empty().html(title).fadeTo(300,1);
			});
			
			jQuery("#testDescrDiv").fadeTo(300,0, function(){
				$(this).empty().html(descr).fadeTo(300,1);
			})
		}
		
		// Set numbers navigation
		function ajaxZoomSetNumbers(){
			if (!jQuery.axZm){return false;}
			jQuery("#testNumNav").empty();
			jQuery.each(jQuery.axZm.zoomGA, function (k, v){
				jQuery("<div />")
				.addClass("alternNavi")
				.html(k)
				.attr("id", "alternNavi_"+k)
				.bind("click", function(){jQuery.fn.axZm.zoomSwitch (k)})
				.appendTo("#testNumNav");
			});				
		}

		var ajaxZoom = {}; // Init ajaxZoom object...
		ajaxZoom.path = "../axZm/"; // Path to the axZm folder
		ajaxZoom.parameter = "zoomDir=/pic/zoom/animals&example=25"; // Parameter passed to the player
		ajaxZoom.divID = "test"; // The id of the DIV where ajax-zoom has to be inserted into.
 
		// 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);
				});
				
				// Put the zoom level on different place... not needed
				jQuery("#zoomLogHolder").appendTo("#zoomLayer").css({position: "absolute", right: 38, top: -6, overflow: "visible"});
				jQuery("#zoomLevel").css({"textAlign": "right"});
				
				// Set numbers navigation
				ajaxZoomSetNumbers();

				jQuery("#alternNavi_"+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(".alternNavi").css({backgroundColor: "#1D1D1A"});
				jQuery("#alternNavi_"+jQuery.axZm.zoomID).css({backgroundColor: "green"});
			}
		};
		
		</script>
		<!-- Insert the loader file that will take the above settings (ajaxZoom) and load the player -->
		<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>
		</body>
		</html>
		
MORE EXAMPLES
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom