Flash free online hotspot editor for AJAX-ZOOM 3D/360/2D player. With the help of this editor you can create multiple hotspots or rectangle image areas and setup several click / mouseover actions for them e.g. links, tooltips, popup lightboxes or bind your own JavaScript functions including AJAX-ZOOM API for several events. The default example is a 360 degrees image set. You can however load any other images like catalogue pages or fotoalbums and create hotspots on single (2D) images as well.

As a result the hotspot editor returns a JSON object with all settings including the positions of the hotspots and / or rectangle image areas. Among other considerable possibilities this JSON object can be saved to a JavaScript file and loaded into any other AJAX-ZOOM example later.

1. Hit the Load content tab and follow the instructions in order to change the image(s) you would like to configure with hotspots. For testing just leave whatever is loaded on default.
2. Hit the Hotspots -> New Hotspot tab and define a new hotspots name. Push "create" button.
3. Adjust the hotspot position(s) by simply dragging it to the desired place. For 360 we found it more convenient to use arrow keys to spin while adjusting the positions. In order to disable the hotspot at a particular frame you can right click on it or hit the Hotspots -> Action / Delete tab, choose the hotspot in question (it turns red) and press "Disable in this frame" button. The "Enable in this frame" button is also under this tab. For precise positioning enlarge to the max zoom level!
4. You can change the appearence of your hotspot under Hotspots -> Appearance tab now or later. All the settings applied there e.g. defining a different hotspot image and it's size can be taken over for all hotspots at once.
5. Define what happens when the user clicks on / goes with mouse over a particular hotspot. Hit the Tooltips / Text tab and select the hotspot, it turns red. Under the Tooltips tab you can define most commonly used options for default tooltip which looks similar to Fancybox (it is not Fancybox). If you do not like the appearance you can always modify its CSS (.axZmToolTipInner, .axZmToolTipOuter, .axZmToolTipTitle) or just set a different class (toolTipTitleCustomClass and toolTipCustomClass options). As an idea - the content of the tooltip can be iFrame with any other different content in it. If nothing helps - you want something completely different, you can define event actions on your own. They are saved as strings in the JSON object and will be instantly evaled when loaded.
6. Fine-tuning: possibly there are additional options which might not be "visualized" in this hotspot editor release. Under Save / Edit JSON -> Import / Edit you will see the complete JSON object. Any option (property, value) can be customized for each hotspot individually. For a complete description of the options see under Option / Docu tab.
7. After you have created, positioned and configured your hotspots the JSON should be saved somewhere to be accessed later by the player. This can be done under Save / Edit JSON -> Save JSON to JavaScript file tab. Since AJAX-ZOOM does not utilize any DB we provide only saving to JavaScript file as generic way of saving the work. The file is written into '/pic/hotspotJS' directory (which has to be writeable by PHP); you can change the path to any other directory by editing '/axZm/saveHotspotJS.php'; The password for saving is set inside saveHotspotJS.php as well.
8. The saved JS file is then called over an AJAX-ZOOM callback when the player is loaded... jQuery.fn.axZm.loadHotspotsFromJsFile('../pic/hotspotJS/eos_1100D.js'); (If you will use a database you can just link to any other file which will return JavaScript Object with hotspots configuration.)

This file (example33.php) is the actual hotspots editor which which you can define and edit the hotspots. It is supposed to be in some restricted area of your page. For showing the results and integration of the player into your frontend please use one of the following "clean" examples as the starting point. Also please be aware of that AJAX-ZOOM is highly configurable so you can change the look and feel of nearly everything you could think of.

example33_clean.php basically it has the same setup as this editor but without the toolbar under the player.

For responsive integrations please use example33_responsive.php

Fullscreen example33_fullscreen.php

Gallery with mixed content - still images, videos from diverse sources like Youtube/Vimeo/Dailymotion, documents and 360/3D with or without hotspots.

Sometimes you would want not to put visible hotspots on a spin but only spin to a certain frame and zoom to the area you want to show. In this case we suggest you to take a look at example35.php which is also the main editor for this; there you will find links to "clean" and responsive inplementations.

With this tool you can easily create several crops / thumbnails from 2D images / galleries, 360 spins or 3D multirow which are loaded into AJAX-ZOOM player.

• The Options / Docu tab only refers to the possible configurations of the hotspots and not the AJAX-ZOOM player. AJAX-ZOOM player itself can be configured with hundreds of other options to suit anybody's needs. See AJAX-ZOOM documentation and other examples.
• The file saveHotspotJS.php is very simple and can be ported to any other language other than PHP within minutes. Due to possible XSS attacks it is not recommended to have this file publicly accessible as it is in this example.
• For an alternative method of loading hotspots configurations and positions see also under Load content tab.
• This hotspot editor extension is fairly new and you can expect it to be extended in the nearby future. As usual, Your feedback on usability along with suggestions is much appreciated!
• Please note that the position object of each hotspot accepts absolute positions of the original image (pixel values) or relative percentage values. So in case you already have the coordinates they can be easily imported in AJAX-ZOOM JSON object.

AJAX-ZOOM offers an extended API to handle hotspots in various ways. In fact the entire hotspot editor is built upon this API. The result of the hotspot configurator is a static configuration saved in a file. However you can also build applications which will set hotspots dynamically depending e.g. on users choice.

Tutorial for developers of how to add "tags" to the images and let the users add title and description. This is a little different version of the hotspot editor which is kept simple and is focused only on couple AJAX-ZOOM hotspot features. The example is not completed in the sense that it is ment for developers who can complete and adjust for their own needs.

example34 shows an application, where hotspots are created dynamically and highlight choosen words in the text (saved as image).

If you would like AJAX-ZOOM team to build an application for you, please get in touch with us.

• The answer is Yes and No. AJAX-ZOOM has it's own License Agreement, please read!
• Under certain conditions You can use it totally for free!
• In any case you can and should download and test AJAX-ZOOM without any further obligations. If you like it and would have certain features enabled - You can buy it.
• In case after all you have any doubts or questions please contact the support.

The only difference between any other AJAX-ZOOM implementation / example is that the JavaScript file with JSON data produced by this editor is loaded in AJAX-ZOOM onLoad callback with jQuery.fn.axZm.loadHotspotsFromJsFile API, see below...

Please note that depending on configured hotspots functionality other plugins like Fancybox might be needed!

						<!-- jQuery core (>= 1.5), needed! -->
						<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
						
						<!-- AJAX-ZOOM core, needed! -->
						<link href="../axZm/axZm.css" type="text/css" rel="stylesheet" />
						<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
					

					<div style="min-width: 100px;">
						<div id="abc">
							<!-- Content inside target will be removed -->
							<div style="padding: 20px">Loading, please wait...</div>
						</div>
					</div>
					

					
					// Create empty object
					var ajaxZoom = {}; 
					
					// Define callbacks, for complete list check the docs
					ajaxZoom.opt = {
						onBeforeStart: function(){
							// Set backgrounf color, can also be done in css file
							jQuery(".axZm_zoomContainer").css({backgroundColor: "#FFFFFF"});		
						},
						onLoad: function(){
							// Some settings can be set inline
							jQuery.axZm.spinReverse = false;
							
							// Load hotspots over this function... 
							// or just define jQuery.axZm.hotspots here and trigger jQuery.fn.axZm.initHotspots(); 
							jQuery.fn.axZm.loadHotspotsFromJsFile("../pic/hotspotJS/eos_1100D.js", false, function(){
								// Do something after hotspots are loaded			
							});
						}
					};
					
					// Define the path to the axZm folder, adjust the path if needed!
					ajaxZoom.path = "../axZm/"; 
					
					// Define your custom parameter query string
					// example=spinIpad has many presets for 360 images
					// You can change them in /axZm/zoomConfig.inc.php after elseif ($_GET['example'] == 'spinIpad')
					// 3dDir - best absolute path to the folder with 360/3D images
					// for 2D you can use zoomData, e.g. zoomData=/your/path/image1.jpg|/your/otherPath/image2.jpg
					ajaxZoom.parameter = "example=spinIpad&3dDir=/pic/zoom3d/Uvex_Occhiali"; 
					
					// The ID of the element where ajax-zoom has to be inserted into
					ajaxZoom.divID = "abc";
					
					// Fire AJAX-ZOOM
					jQuery.fn.axZm.load({
						opt: ajaxZoom.opt,
						path: ajaxZoom.path,
						parameter: ajaxZoom.parameter,
						divID: ajaxZoom.divID
					});	
					

These options below are only about possible hotspot settings and not the AJAX-ZOOM player itself. AJAX-ZOOM player can be configured with hundreds of other options to suit anybody's needs. See AJAX-ZOOM documentation and other examples.

					
jQuery.fancybox(
[{
	'href': '/path/some/image1.jpg',
	'title': 'Description 1 image'
},{
	'href': '/path/other/image2.jpg',
	'title': 'Description 2 image'
}], {
	'padding': 0,
	'transitionIn': 'none',
	'transitionOut': 'none',
	'type': 'image',
	'titlePosition': 'over',
	'changeFade': 0
});

position: {
	1: {left: 1500, 
		top: 720
	},
	3: {left: 660, 
		top: 710
	},
	4: {left: 760, 
		top: 510
	}
}

position: {
	1: {left: 300, 
		top: 720, 
		width: 300, 
		height: 300
	},
	3: {left: 660, 
		top: 710, 
		width: 200, 
		height: 350
	},
	4: {left: 760, 
		top: 510, 
		width: 700, 
		height: 220
	}
}

Below are only couple settings you can set right away.