example32_responsive_vertical.phpHOMEExamples overviewDownloadAsk a question
example33_clean.php

Create interactive 2D/ 360°/ 3D product presentations / product catalogues with clickable hotspots and hotspot areas using high or ultra resolution images!

Loading, please wait...
About AJAX-ZOOM hotspot editor [Last updated: 2016-07-03]

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.

How does it work?
  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 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 -> 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 link to any other file which will return JavaScript Object with hotspots configuration.)
"Clean" examples

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
Gallery with mixed content - still images, videos from diverse sources like Youtube/Vimeo/Dailymotion, documents and 360/3D with or without hotspots.
Alternatives

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.
Notes
  • 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.
Build Applications

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.

Comments (1)

william seitz
2013-03-27 01:27:25
william seitz
considering 365 viewer for certain products we sell online

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.
The final code example

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.

JavaScript & CSS files in Head

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>
					
HTML markup in body
					<div style="min-width: 100px;">
						<div id="abc">
							<!-- Content inside target will be removed -->
							<div style="padding: 20px">Loading, please wait...</div>
						</div>
					</div>
					
Javascript to init AJAX-ZOOM with hotspots
					
					// 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
					});	
					
Documentation of the the hotspot configuration object options

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.

- highlight selected - draggable
Create new hotspot

Below are only couple settings you can set right away.

- point    - rectangle
- makes most sense for 360 / 3D
- set altTitle same as hotspot name
Left: Top:
The 'left', 'top', 'width' and 'height' values can be pixel values related to original size of the image (e.g. left: 1600, top: 900 or left: '1600px', top: '900px') or they can be percentage values (e.g. left: '45.75%', top: '37.3%').
Hotspot appearance
width: px    height: px

Instead of using png icons for hotspots you could also use CSS class, e.g. "axZm_cssHotspot" as an example. You could also use two CSS classes, e.g. "axZm_cssHotspot axZm_pulse" will result in a pulsing css hotspot.

Please note, that when a specific hotspot is selected in the editor, the default "hotspotImage" (the red round with plus sign on it) is applied to highlight the selection. This happens only in this hotspot configurator and does not affect your final code. Also the hotspots are only draggable in this configurator.

e.g. axZm_rotate or axZm_pulse
e.g. axZm_rotate_stop
Advanced settings
zoomRangeMin: %    zoomRangeMax: %
- for landmarks set to "top"
offsetX: px    offsetY: px
opacity:    opacityOnHover:
px
  
  
borderWidth: px    borderColor:    borderStyle:
   - apply for all hotspots
- highlight selected - draggable
Alt title
This is a virtual "alt" title which appears when the user hovers a hotspot with the mouse pointer. You can style it as according to your needs. Best assign a custom class to it.
Left (altTitleAdjustX): px    Top (altTitleAdjustY): px
Sticky label
Sticky label is simmilar to "Alt title" but it is always present. If you set labelGravity option below to "center" it will cover the hotspot. In this case you could remove the hotspot image in the "Hotspot appearance" tab and use only this sticky label as your hotspot.
px
Left (labelOffsetX): px    Top (labelOffsetY): px
Expandable contents
Here you can enter title and description to show them in a different way than Default "Popup" does. Besides HTML or your text you could also load external content in iframe! The prefix for the source is "iframe:"

e.g. to load an external page simply put something like this in the descripion:
iframe://www.some-domain.com/123.html

To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code):
iframe://www.youtube.com/embed/eLvvPr6WPdg?feature=player_detailpage

To load some dynamic content over AJAX use "ajax:" as prefix, e.g.
ajax:/test/some_content_data.php?req=123
Default popup contents
If you want to show some sort of a virtual window with contents in it you could use and configure something simmilar to "Fancybox" here. 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). An alternative can be found in the next tab -> "Expandable". If you do not like these both built in ways, you could always use your own method by defining your custom click event under Link / Event tab above!
Size and look
Width (toolTipWidth): px    Height (toolTipHeight): px
  fixed position (toolTipGravFixed)   autoflip (toolTipAutoFlip)
Left (toolTipAdjustX): px    Top (toolTipAdjustY): px
px - from all edges
- click    - mouseover    - hide time if mouseover (toolTipHideTimout)
e.g. axZmToolTipTitleCustom (try it)
e.g. axZmToolTipInnerCustom (try it)
(use transparent PNG in toolTipCustomClass for only backgound opacity)
- title needs to be defined too (title div is handle)
Close icon and overlay
   offset (toolTipCloseIconOffset):
Show: (toolTipOverlayShow):    Close on click (toolTipOverlayClickClose):
Opacity (toolTipOverlayOpacity):    Color (toolTipOverlayColor):
Mainly for rectangles
Do not use " (double quotation marks) in html tags. Use ' instead! set Lorem
e.g. axZmHotspotTextCustom (try it)
e.g. {"color":"black","height":"100%","width":"100%"}
Link and other events (JavaScript)
For click, mouseover etc. events - if you are using jQuery functions, do not write e.g. $.fancybox(...); write jQuery.fancybox(...); instead!!!
Load a different 2D / 360 or 3D content
You do not need to edit html of this file in order to load a different 2D / 360 or 3D content into the editor. Just enter a path into one of the fields below and press "LOAD" button. Press "GET" button to see what is currently loaded.
or
(optional)
  
How does it work:
  1. For 2D (single image or gallery with more images) please enter local path(s) to the image(s), e.g.
    "/pic/zoom/animals/test_animals1.png"
    or image set with image paths separated with vertical dash e.g.
    "/pic/zoom/animals/test_animals1.png|/pic/zoom/animals/test_animals2.png"
    If you want to load all images from a folder please just enter the path to this folder e.g.
    "/pic/zoom/animals"
    • For 360 (single row 360 object) please enter only the path to the folder where your 360 images are located e.g.
      "/pic/zoom3d/Uvex_Occhiali";
    • For 3D (multi row turnable object) please enter the path to the folder where subfolders with each row of 3D are located.
      On http://www.ajax-zoom.com/examples/example33.php this could be
      "/pic/zoomVR/nike"
      (not provided with the download package)
  2. Hotspot file path is the path to the file with hotspot configurations and positions, e.g.
    "/pic/hotspotJS/eos_1100D.js"
    You can create such a file in the previous tab "Save / Edit JSON"
Notes:

When you hit the "LOAD" button the parameters entered are passed to the function "changeAxZmContentPHP" located in "/axZm/extensions/jquery.axZm.hotspotEditor.js", which basically just reloads the player same way it is loaded when the page is opened.

There are also different ways of loading and saving hotspot configuration parameters besides loading a static JavaScript file. For example you could point to /some/dyn_language/file.do?hotspotID=123 which would return the JSON object stored in a database. If you use the API function jQuery.fn.axZm.loadHotspotsFromJsFile then you have to reference jQuery.axZm.hotspots variable to the returned JSON object from your /some/dyn_language/file.do (the return of this file is expected to be JavaScript - without script tags).

Alternatively define jQuery.axZm.hotspots wherever after AJAX-ZOOM is initialized, e.g. onBeforeStart callback (or later at any time) and "manually" init the hotspots with jQuery.fn.initHotspots()

Taking the above one step farther you can also build applications which will set hotspots dynamically depending e.g. on users choice or action. example34 shows such an application, where hotspots are created dynamically and highlight choosen words in the text (saved as image).

Import, edit, apply entire JSON for all hotspots manually
The code in the textarea below is what has been produced by this hotspot editor.
Here you can adjust it manually if needed. Do not forget to press "Apply" button after your changes!
  - with defaults   - positions as image names   - do not format
 
 

- keep draggable (will not affect final JSON)
Save to JS file
(can be set inside '/axZm/saveHotspotJS.php')
- keep linebreaks, tab stops etc.
- creates backup of the current js file if present with a timestamp in file name (recommended)
- instantly update / import JSON settings before saving
.js
On default all files will be saved into "/pic/hotspotJS" folder. This saving path is adjustable directly in "/axZm/saveHotspotJS.php" file. Saving JSON data to a JavaScript file is one of the possibilities to initialize created hotspots with any other implementation / example over AJAX-ZOOM "onLoad" callback. See also under About -> Code example tab.
Import only coordinates
- positions as image names - do not format