example11.php HOME Overview (index.php) Buy / Download Ask a question

AJAX-ZOOM (for developers)
tagging images with hotspots, adding title and description;
"createNewHotspot" API tutorial;

Ver. 4.2.1 - the old example got obsolete and has been replaced with a tutorial for developers of how to add "tags" to the images and let the users add title and description.

Click somewhere on the image to create a hotspot. You can drag & drop it to adjust the position. Click on the hotspot to add / read title and description. You can right click on the hotspot to remove it (can be disabled).

Loading, please wait...
>> HTML console


This snippet is not ment to represent a final or complete solution! So the output of tagging is displayed in the "HTML console". Normally you would be saving the resulted JSON to a file, database, push to another persons display or perform some other fancy stuff with it. For example in a Digital-Asset-Management system the marketing manager could assign a task to edit the image in a certain way... If you need cross-origin communication please google for "window.postMessage";

As mentioned above this AJAX-ZOOM snippet is for developers who would like to extend and finish this code customizing it for their own needs. If you have a distinguished idea but do not want or do not have time to complete, you can ask AJAX-ZOOM team for a quote to do it for you.

JavaScript ans CSS in head

		<!-- Include jQuery core into head section if not already present -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

		<!-- JSON -->
		<script type="text/javascript" src="../axZm/plugins/JSON/jquery.json-2.3.min.js"></script>

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


/* cursor in tagging mode */
.azTagging {cursor: crosshair !important;}

/* title textfield */
.azTextField {width: 100%; margin-bottom: 5px; box-sizing: border-box !important; padding: 5px; font-family: arial; font-size: 12px; border: 1px solid #999999; border-radius: 3px;}

/* description textarea */
.azTextArea {width: 100%; height: 100px; box-sizing: border-box !important; padding: 5px; background-color: #FFF; font-family: arial; font-size: 12px; border: 1px solid #999999; border-radius: 3px;}

/* save, delete button */
.azButton {margin-top: 5px;}

/* message about click to place a hotspot */
.azTaggingMsg {position: absolute; background-color: #B50904; width: 290px; margin-left: -140px; top: -1px; left: 50%; border: #000 1px solid; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; font-size: 11px; color: #FFF; padding: 1px 5px 1px 5px; z-index: 1; pointer-events: none;}

/* parent container for navigation (mNavi) */
.azCustomNavi{background-color: #AAA; box-sizing: border-box; height: 58px; padding: 4px 0px 4px 0px; border-left: #000 1px solid; border-bottom: #000 1px solid; border-right: #000 1px solid;}

/* html console */
.azTaggingResults{background-color: #101010; color: #3cc628; padding: 5px; margin: 0; height: 489px; overflow: hidden; overflow-y: auto;}
.azPre{tab-size: 2; -moz-tab-size: 2; margin: 0; font-size: 11px; font-family: monospace; padding: 5px; background-color: transparent; color: #3cc628; border-width: 0;}

/* Overwrite css from /axZm/jquery.axZm.js */
.axZmToolTipInner {background-color: #c5d8e1; border-color: #5583b4; border-width: 3px;}

.axZmToolTipTitle {color: #FFF; /* #1a4a7a*/ font-size: 16px; line-height: 18px; min-height: 24px; text-shadow: 0px 0px 2px rgba(150, 150, 150, 0.75);}

.axZm_zoomCustomNaviParentID {margin: 0 auto;}

#axZm_zoomLogHolder {width: 55px;}

HTML in body

azTaggingResults shows JSON created after placing the hotspots, so it is not needed in your final code

<div class="embed-responsive" style="padding-bottom: 80%; border: #000 1px solid">
	<!-- Div where AJAX-ZOOM is loaded into -->
	<div id="azParentContainer" class="embed-responsive-item" style="max-height: 94vh; max-height: calc(100vh - 50px);">
		Loading, please wait...
<!-- Parent container for "mNavi" -->
<div id="azCustomNavi" class="azCustomNavi"></div>

<!-- Console -->
<div id="azTaggingResults" class="azTaggingResults">>> HTML console</div>


Every line is commented... The whole code could be ofcourse wraped into external JS. If after all you have any questions regarding AJAX-ZOOM - do not hesitate to contact us.

Load other examples in slider