AJAX-ZOOM supports hotspots (interactive markings on the image) not only on 360° degree product views, as presenting above, but also on 3D product views and plain images, including image galleries. Hotspots are also compatible and combinable with "interactive product tours", shown in the next tab above.
But, it is also easily possible to integrate the hotspot editor into existing applications without using AJAX-ZOOM modules! By default setting, the JSON-like code, generated in this hotspot editor, is stored in a file. However, you can also store this data into a database table or wherever else. Within the code of the hotspot editor file there is a possibility to change the storage method and location over a code switch. When you do so, the get and put actions redirect to an AJAX controller path of your choice. Within the controller, you decide what happens with the data or where it comes from.
Each hotspot has about 100 configurable parameters that control appearance and behavior. Of course, you do not have to set all parameters for each hotspot but only those that differ from default settings. If you have many hotspots and you want to apply the same settings to all of your hotspots, which differ from default settings, then you can also set the defaults before initiating the hotspots using the Hotspots API or jQuery.fn.axZm.setHotspotDefaults function to be precise.
As one can see in the example above, you have full control over the look of the hotspots. They can be different in size, represented by PNG image or consist only out of CSS class or multiple classes. You can also hide the hotspot itself if the intent is to show a thin line to the location, represented by the invisible hotspot. In addition, you can exactly define within which interval of the zoom level, certain hotspots supposed to be visible or hidden. If you click on the pulsing marker on the bicycle shifter in the above example, the magnification will show three more hotspots that are only visible starting from a certain zoom level.
Hotspot labels, as well as the connecting lines between the hotspot and the label, are optional. These labels are also completely customizable with CSS. Furthermore, their position can be set as fixed pixel distance value or percentage value relative to the image size. For 360 or 3D product views, where there is an image for each frame, you can also set the positions of the labels in each frame or even frame intervals individually. If connecting lines are present, you do not have to worry about their adjustments regarding the slope and position as they do connect automatically. In addition, you can define numerous appearance options for these connecting lines.
You can load hotspots into all AJAX-ZOOM examples. If no extra function parameter in an extension is present for this, then you can always initialize the hotspots using the jQuery.fn.axZm.initHotspots method within the AJAX-ZOOM "onLoad" callback / hook.
As already mentioned, the use of the hotspot editor is optional! Utilizing the AJAX-ZOOM hotspot API allows you to generate hotpots entirely without this editor. You can inspect the code of this application to see it in use. As the matter of fact, the hotspot editor itself is solely constructed upon AJAX-ZOOM API.
However, if you see the advantage of utilizing the hotspot editor within the backend of your application, in the top section of the editor file you will find all necessary variables to connect the editor to the database in order to read / write the produced code and to load particular 360 or single images into it for farther editing. Apparently, you must set some variables dynamically by passing GET or POST values to the editor. The read and write tasks should be connected over AJAX controller of your application.
Since we already have integrated this editor into several standard e-commerce systems, we advise you to look at these integrations as reference. These integrations respect the module / plugin structure of the mentioned systems, so they do not affect the update capability of the core code. On demand and your request, we are ready to assist you on integration with words and deeds.
Demonstration of the AJAX-ZOOM hotspot API. This example is for developers only!
You can tag images with interactive markers (hotspots) using
$.fn.axZm.createNewHotspot API by clicking on a spot at AJAX-ZOOM viewer.
Additionally, you can define title and descriptions for these markers.
In this example, the data object prints in the "virtual console" as JSON and updates when it changes.
You can store this data within your application or do something different with it, e.g. send it via
PostMessage to another client.
All codes have inline comments and as a developer, you will be able to start adapting them fast. In the documentation, you will find additional information about all API methods you will find in this example code.
This is one of the most progressive zoom on hover extensions with optional 360 product views, multilevel 3D product views, videos, 360 product tours and hotspots. It is adaptive, responsive and it features over 100 options. Depending on the settings, the extension displays as a swipe slider on mobile devices and as zoom on hover on desktops.
The images in zoom window, as well as the swiping images are not the original high-resolution source images. The high-resolution images display when the user clicks on that preview. At full screen or responsive modal box, the original image shows inside AJAX-ZOOM viewer. In there, it is further on possible to swipe between the images and switch between other media types.
The media gallery is optional and you can place it vertically or horizontally. By default settings, the extension determines the best position out of two on its own.
We integrate this extension into all our modules for shopping carts. It replaces the default image viewer at product detail pages. Depending on the state of the module development progress, you can also set it to display e.g. in a tab and only for 360 product views.
In example32, you can learn more about subtle differences, which make a big difference when put together. You will also be able to switch few interesting options and immediately view the changes. At the bottom of this page, you will find full documentation and some example codes.
Enabling "axZmMode" option of the hover zoom extension makes it act as most other AJAX-ZOOM examples. The deep zoom viewer with tiles technology shows up without any detours. Users can zoom in and out by the mouse wheel or pinch zoom on touch devices.
We have added this option to the hover zoom extension primarily because the extension and all its options are already part of several e-commerce modules. It just did not make any sense to implement a different example and provide backend options configuration handling for it.
However, some of the options of the hover zoom extension such as the items gallery or aspect ratio observation are still functional and useful. This fully justifies a little overhead compared to if you would only want to use pure AJAX-ZOOM implementation.
AJAX-ZOOM mouseover extension integrated into fictive products detail page with color swatch feature. The color swatch is the working part of this product detal page mockup. You can change few important configuration settings and watch the changes happen immediately.
For now, the editor features two types of hotspots. A normal spot and a rectangular area. Rectangular areas increase in size simultaneously on zoom. In a future version, it will be possible to define polygons for hotspot areas too. Positioning hotspots is as simple as drag and drop them.
This hotspot editor is solely built upon public AJAX-ZOOM API methods. Thus, for displaying hotspots on 360 spins or regular images you do not necessarily need this editor. You can dynamically create and remove hotspots from data coming from elsewhere. There is a documentation for all API methods and property types of the AJAX-ZOOM hotspot data object. Obviously, this is something for developers. Normal users should use this editor or let their technical stuff integrate it into the workflow.
Clean (without too much redundant code) example with a 360-degree product spin and excessive usage of hotspots.
There is no big difference between any other 360-degree spin implementation except that it adds hotspots via
method in AJAX-ZOOM
The second difference is that this example has additional UI elements.
These hotspots have been produced with the hotspot editor.
Full-page 360-degree product spin view with hotspots. In this example, the viewer opens on load and covers the entire browser window. The user can further expand it to fullscreen view.
If you want to integrate this 360 viewer with hotspots but have limited access to the frontend, you can integrate it using a responsive iframe element. The viewer will adjust to the size of the iframe automatically.
This demo directly relates to AJAX-ZOOM hotspots. Our task was to create an example with the possibility to highlight parts of an image from data located in external sources. In this particular implementation, the data is an OCR schema and it is stored in XML files. Some OCR software includes coordinates (x1, y1, x2, and y2) of recognized words into their schemata. These coordinates are enough information for AJAX-ZOOM hotspot API to create and remove overlays at any viewport and zoom level.
Furthermore, users are able to search for words in the autosuggest field. The results display below the field and sorted by the page and finding numbers. This UI is actually a proof of concepts and it works. All pages with no results hide temporarily. When the user clicks on a number, the viewer takes him to the page and zooms to the selected spot. The word highlights with an overlay.
The OCR schemes supported out of the box are "hOCR" and "ALTO". It is easily possible to adapt it to any other scheme. Even better would be to expose the XML files in a database and search there. That would make it easier to search in very large archives. Switching between images sets (books, newspapers etc.) is not a big deal for AJAX-ZOOM API methods. But, since this intends to be a frontend interface blueprint, the example stops at that point. Without further adaptation, it is efficiently usable for scanned writings with a length of up to 100 - 200 pages. A perfect software tool for museums, digital archives, and other digital publishers.
It is not required to use the AJAX-ZOOM "Modules / plugins / extensions", as AJAX-ZOOM can be used as stand-alone application or integrated manually nearly in any system. However, if a module is available for your system, it will facilitate and speed up the integration of AJAX-ZOOM into your CMS or e-commerce / shopping cart tremendously. If your server meets all technical requirements, then you will have AJAX-ZOOM running in your system within two minutes. You can install and configure these AJAX-ZOOM modules with just a few clicks and without writing a single line of code.
Available are modules for Magento, Prestashop, WooCommerce (WordPress), Opencart, Shopware und Oxid (the last two are commonly used in German speaking countries).
The license price primarily depends on the number of different images that display in AJAX-ZOOM image viewer on a domain. Unlimited options are available. The prices for the regular licenses are one-time payment! You can find the complete license agreement and price list on the download page. Before ordering, we advise you to download and test the demo (light) version within your development environment.
If necessary, we can issue time-limited license keys free of charge. However, AJAX-ZOOM and AJAX-ZOOM modules / plugins for diverse CMS and shopping carts should work with few restrictions without entering any licensing data! If something does not work as expected, there must be a different reason than missing license. Do not hesitate to contact AJAX-ZOOM support if you encounter any technical difficulties.
To use live-support-chat you will need to have Skype installed on your device.
In case live support over Skype is not immediately available please leave a message or send us an email over contact form at first.
Every AJAX-ZOOM related inquiry / question will be answered!