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 photo albums 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 "ADD NEW HOTSPOT" 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 (mouse pointer has to be over the player). For precise positioning enlarge to the max zoom level! For moving by one pixel in any direction you can also use numbers block on your keyboard. You might also find it easier to roughly set the positions in Hotspots -> Positions tab before actually doing this precisely with zoom in the player.
4. You can change the appearance of your hotspot under Hotspots -> Hotspot 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 change the first few lines in this file to load and POST the JSON. All variables are explained inline. You can even parse this file as a template... There is no need to change anything in this file except the upper part with few variables in order to implement it in any CMS.

This file (example33.php) is the actual hotspots editor. With the help of this editor 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 implementations. 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 basis for ecommerce modules / plugins is mainly example32_responsive.php. It does already support hotspots over options settings. This editor will be certainly, maybe already is (please check), integrated into our modules for Magento, PrestaShop, Opencart, WooCommerce, Shopware and other plugins.

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 meant 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.

• IE8, IE9 - if you want to test hotspots working on older IE, this will fail on some functionality if you will be using simulation of older version in new IE developer tools. Please use real old IE version or at least real IE9 version developer tools to test!
• 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.

Comments (1)

william seitz 2013-03-27 01:27:25

considering 365 viewer for certain products we sell online

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.

Add Comment

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... Once again, do not try to adapt this editor (example33.php) for final view. You can use other example33_x examples or basically any other example for this.

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

<!-- jQuery core -->
<script type="text/javascript" src="https://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.