AJAX-ZOOM short tutorial 1 - no PHP / ASP.NET

AJAX-ZOOM - short tutorial 1

This example does not require PHP codes and could be also inserted with an WYSIWYG editor into any content. All you have to do is to define ajaxZoom.parameter string with paths to the source images.

By defining the query string parameter in ajaxZoom.parameter example=2 some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 2){ So if changes in /axZm/zoomConfig.inc.php have no effect look for the same options /axZm/zoomConfigCustom.inc.php;

Thus in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 2){ you could for example set:

$zoom['config']['picDim'] - inner size of the player.
$zoom['config']['useHorGallery'] - enable / disable horizontal gallery.
$zoom['config']['useGallery'] - enable / disable vertical gallery.
$zoom['config']['displayNavi'] - enable / disable navigation bar.
$zoom['config']['innerMargin'] - border width around the player.
and many others...

Loading, please wait...

The code

		<!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 where AJAX-ZOOM is loaded into -->
		<DIV id="test" style="min-height: 462px; margin: 0; clear: both;">Loading, please wait...</DIV>
		
		<script type="text/javascript">
		// Create new object
		var ajaxZoom = {}; 

		// Define the path to the axZm folder
		ajaxZoom.path = "../axZm/"; 
		
		// Define your custom parameter query string
		ajaxZoom.parameter = "example=2&zoomData=/pic/zoom/furniture/test_furniture1.png|/pic/zoom/furniture/test_furniture2.png|/pic/zoom/boutique/test_boutique1.png|/pic/zoom/boutique/test_boutique2.png"; 
		
		// The ID of the element where ajax-zoom has to be inserted into
		ajaxZoom.divID = "test";
		
		</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

	See AJAX-ZOOM in action on Magento Integration quide
	See AJAX-ZOOM in action on xt:Commerce (xtcModified, Gambio, VEYTON 4) Integration quide
	See AJAX-ZOOM in action on Oxid eSales Integration quide
	More comming soon...

Comments (0)

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.