previous exampleHomeDownload
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...
Photos by: Carsten Klein

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.3/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_animals2.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>
		

Modules & Plugins Ecommerce

Magento 360 spin & zoom See AJAX-ZOOM in action on Magento
Integration quide
XT:commerce 360 spin & zoom See AJAX-ZOOM in action on xt:Commerce (xtcModified, Gambio, VEYTON 4)
Integration quide
Oxid product zoom See AJAX-ZOOM in action on Oxid eSales
Integration quide
hybris zoom 360 spin See AJAX-ZOOM in action on hybris multichannel commerce (no php)
  More coming soon...
6.0+ 2.0+ 2.0+ 1.0+ 9.5+ 2.0+ 4.0+ Pinch zoom, tap zoom,
swipe

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):
Website:
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.
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