example25.phpOverview (index.php)Buy / DownloadAsk a question
example27.php

AJAX-ZOOM - short tutorial - JAVASCRIPT

Unlike in example18.php this and most other examples do not require any PHP codes in the frontend and could be even posted with WYSIWYG editor into a CMS content. All you have to do is to define ajaxZoom.parameter string with paths to the source images and adjust the path to axZm directory.

Loading, please wait...

In the code below we show two possibilities. The first one requires that jQuery core, AJAX-ZOOM javascript and css files are already in head. If you do not have access to head you can also use the second possibility and insert jquery.axZm.loader.js in a script tag which will byload jQuery core if not already present and other javascript / css files instantly.

Possibility I (one)

Requires some files to be in head section though they could be also pasted in body.

Javascript and CSS in head section

	<!--  Include jQuery core into head section if not already present -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

	<!--  AJAX-ZOOM javascript -->
	<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
	<link type="text/css" href="../axZm/axZm.css" rel="stylesheet" />

HTML in body

	<!-- Div where AJAX-ZOOM is loaded into -->
	<div id="ajaxZoomContainer" style="min-height: 462px;">Loading, please wait...</div>

Javascript in body

	<script type="text/javascript">
		// Create empty 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/furniture_004.jpg\
		|/pic/zoom/furniture/furniture_003.jpg\
		|/pic/zoom/boutique/boutique_001.jpg\
		|/pic/zoom/boutique/boutique_002.jpg\
		"; 

		// The ID of the element where ajax-zoom has to be inserted into
		ajaxZoom.divID = "ajaxZoomContainer";

		ajaxZoom.opt = {
			onLoad: function(){
				// Do something
			}
		};
		
		// Load AJAX-ZOOM 
		jQuery(document).ready(function(){
			// not responsive
			jQuery.fn.axZm.load({
				opt: ajaxZoom.opt,
				path: ajaxZoom.path,
				parameter: ajaxZoom.parameter,
				divID: ajaxZoom.divID
			});
			
			// open AZ responsive
			/*
			jQuery.fn.axZm.openFullScreen(
				ajaxZoom.path, 
				ajaxZoom.parameter, 
				ajaxZoom.opt, 
				ajaxZoom.divID, 
				true, 
				false,
				false
			);
			*/
		});
	</script>

Possibility II (two)

The way with the "loader" javascript file. First we define over Javascript where to find /axZm directory (ajaxZoom.path), then we define which files and with which configuration set they should be loaded (ajaxZoom.parameter), then the container ID where AJAX-ZOOM schould be loaded into. Finally we insert "jquery.axZm.loader.js" which will load everything else needed.

HTML in body

	<!-- Div where AJAX-ZOOM is loaded into -->
	<div id="ajaxZoomContainer" style="min-height: 462px;">Loading, please wait...</div>
	
	<script type="text/javascript">
		// Create empty 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/furniture_004.jpg\
		|/pic/zoom/furniture/furniture_003.jpg\
		|/pic/zoom/boutique/boutique_001.jpg\
		|/pic/zoom/boutique/boutique_002.jpg\
		"; 

		// The ID of the element where ajax-zoom has to be inserted into
		ajaxZoom.divID = "ajaxZoomContainer";

		ajaxZoom.opt = {
			onLoad: function(){
				// Do something
			}
		};
	</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>

Possibility III (three)

If you experience any problems with the above or need more then one instance of AJAX-ZOOM showing simultaneously you could also use iframes..

HTML in body

	<!-- AJAX-ZOOM will be loaded into iframe -->
	<iframe src="../examples/example33_vario.php?zoomData=/pic/zoom/furniture/furniture_003.jpg|/pic/zoom/boutique/boutique_001.jpg" width="100%" height="400" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" allowfullscreen></iframe>

Important notes

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: