example16.php HOME Examples overview Download Ask a question

AJAX-ZOOM - experiment: outer "image map" same size as initial image. Autozoom after image loads. Before / after?

Loading, please wait...
Image source: canon.com; Canon EOS 5DS; ISO: 100; 5792x8688px
Image 1 Image 2


In this example the "image map" is placed outside of AJAX-ZOOM player and has the same size as the player. If you define more than one image which are passed to AJAX-ZOOM, then despite that all galleries are turned off AJAX-ZOOM still knows about the other images. Provided that all images have the same dimensions (width x height) you can switch between the images with the API $.fn.axZm.zoomSwitchQuick() without losing the zoom state.

JavaScript & CSS files in Head

<!-- jQuery core -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

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

HTML makup in body

<div class="clearfix" style="padding: 10px; background-color: #3D3D3D">
	<div style="float: left; width: 362px; height: 542px; position: relative;">
		<div id="mapContainer" style="position: absolute; width: 362px; height: 542px; top:-1px;"></div>
	<div id="ajaxZoomTest" style="float: right; width: 362px; height: 542px;">Loading, please wait...</div>

<div style="text-align: center; padding-top: 5px; position: relative;">
	<div style="position: absolute; top: -2px; right: 0;">Image source: canon.com</div>
	<a class="aAPI" href="javascript:void(0)" onclick="jQuery.fn.axZm.zoomSwitchQuick(1)">Image 1</a>
	<a class="aAPI" href="javascript:void(0)" onclick="jQuery.fn.axZm.zoomSwitchQuick(2)">Image 2</a>


		// Create new object
		var ajaxZoom = {};
		ajaxZoom.opt = {
			onBeforeStart: function(){
				// Not all but some AJAX-ZOOM options can be set inside onBeforeStart callback
				jQuery.axZm.useMap = true;
				jQuery.axZm.mapParent = "mapContainer";
				jQuery.axZm.zoomSlider = true;
				jQuery.axZm.zoomSliderHorizontal = true;
				jQuery.axZm.zoomSliderHeight = 100;
				jQuery.axZm.zoomSliderHandleSize = 11;
				jQuery.axZm.zoomSliderWidth = 5;
				jQuery.axZm.zoomSliderMarginH = 10;
				jQuery.axZm.zoomSliderMarginV = 10;
				jQuery.axZm.zoomSliderPosition = "bottomLeft";
				jQuery.axZm.zoomSliderMouseOver = false;
				// Hide AJAX-ZOOM on loading
				$("#axZm_zoomContainer").css("visibility", "hidden");
			onLoad: function(){
					x1: "50%",
					y1: "40%",
					speed: 0,
					speedZoomed: 0,
					ajxTo: 0,
					zoomLevel: "100%",
					callback: function(){
						// Show AJAX-ZOOM after zoomTo
						$("#axZm_zoomContainer").css("visibility", "visible");
			onFullScreenCloseEnd: function(){
						speed: 0,
						speedZoomed: 0,
						ajxTo: 0,
						zoomLevel: "100%"
				}, 1);
		// Path to the axZm folder
		ajaxZoom.path = "../axZm/"; 
		// Define your custom parameter query string
		// By example=19 some settings are overridden in zoomConfigCustom.inc.php
		// zoomData is the php array with images turned into string
		ajaxZoom.parameter = "zoomData=/pic/test/canon_eos_5ds/canon_eos_5ds_sample1.jpg|/pic/test/canon_eos_5ds/canon_eos_5ds_sample1_bw.jpg&example=19"; 
		// The id of the Div where ajax-zoom has to be inserted into
		ajaxZoom.divID = "ajaxZoomTest"; 
				opt: ajaxZoom.opt,
				path: ajaxZoom.path,
				parameter: ajaxZoom.parameter,
				divID: ajaxZoom.divID


If you want to switch images with arrow keys you could attach keyup event to body and switch between images this way also at fullscreen.

$("body").keyup(function(e) {
	if ($.axZm && $.axZm.zoomPN && $.axZm.zoomID) {
		if (e.keyCode == 37) {
		} else if (e.keyCode == 39) {

Comments (0)

Leave a Comment

Name (required):
Email (required):
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.