This is a demonstration of the AJAX-ZOOM API methods that deal with hotspots. Therefore, it makes only sense for developers!
You can tag images with interactive markers (hotspots) using the AJAX-ZOOM
$.fn.axZm.createNewHotspot API method by clicking on some spot at the AJAX-ZOOM viewer.
The position of the hotspots is adjustable via drag & drop.
It works in the zoomed and not zoomed states so that the user can precisely set the position.
Additionally, the user can define a title and a description for these markers. All data such as coordinates of the hotspots and the text is present in external JavaScript object, which keeps track on all changes. The functionality applies to standard images and 360 product views equally well.
In this example, the data object prints in the "virtual console" as JSON. The output is updated when the data changes. You can store this data within your application or do something different with it. For instance, you can send it via PostMessage to a different client. In a Digital-Asset-Management system, the marketing manager could assign a task to edit the image in a certain way.
This snippet is not meant to represent a final or complete solution! All codes have inline comments, so as a developer you can start adapting them fast. In the AJAX-ZOOM documentation, there is plenty of additional information about all API methods that are present in this example code.
There are several other examples for developers that may be useful to extend the functionality of this one. For example, it is possible to take snapshots of the specific areas of an image, save them or add to the report. In any case, as a developer, you should inspect the possible callbacks/hooks before proceeding to edit the code of this snippet.
If you have a determinate idea of the functionality that you want to achieve but do not want or do not have time to complete, you can ask the AJAX-ZOOM team for a quote.
<!-- Include jQuery core into head section if not already present -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/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;}
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...
</div>
</div>
<!-- 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.
