example25.php HOME Examples overview Download Ask 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 class="embed-responsive" style="padding-bottom: 50%;">
	<!-- Div where AJAX-ZOOM is loaded into -->
	<div id="ajaxZoomContainer" class="embed-responsive-item" style="max-height: 94vh; max-height: calc(100vh - 50px);">
		Loading, please wait...
	</div>
</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(){
		// Load AJAX-ZOOM not responsive
		/*
		jQuery.fn.axZm.load({
			opt: ajaxZoom.opt,
			path: ajaxZoom.path,
			parameter: ajaxZoom.parameter,
			divID: ajaxZoom.divID
		});
		*/

		// open AJAX-ZOOM responsive
		// Documentation - http://www.ajax-zoom.com/index.php?cid=docs#api_openFullScreen
		$.fn.axZm.openResponsive(
			ajaxZoom.path, // Absolute path to AJAX-ZOOM directory, e.g. "/axZm/"
			ajaxZoom.parameter, // Defines which images and which options set to load
			ajaxZoom.opt, // callbacks
			ajaxZoom.divID, // target - container ID (default "window" - fullscreen)
			false, // apiFullscreen- use browser fullscreen mode if available
			true, // disableEsc - prevent closing with Esc key
			false // postMode - use POST instead of GET
		);
	});
</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.responsive = true; // Embed responsive

	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. For more information on iframes please see example13.php

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:

Comments (0)

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.