example16.phpExamples overviewDownloadAsk a question
example18.php

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

About

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>
	<div id="ajaxZoomTest" style="float: right; width: 362px; height: 542px;">Loading, please wait...</div>
</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>
</div>
	

JavaScript

		// 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(){
				jQuery.fn.axZm.zoomTo({
					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(){
				setTimeout(function(){
					jQuery.fn.axZm.clearTiles(true);
					jQuery.fn.axZm.zoomTo({
						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"; 
		
		jQuery(document).ready(function(){
			jQuery.fn.axZm.load({
				opt: ajaxZoom.opt,
				path: ajaxZoom.path,
				parameter: ajaxZoom.parameter,
				divID: ajaxZoom.divID
			});			
		});
	

Comments (0)

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.