For a 360 or 3D web-view, the settings in this example are set the way that the user has only the possibility to spin at none zoomed state. Upon a click, the image or 360 will zoom to its original size. Another click at zoomed state causes the image to full zoom out again. Additionally, a zoom-out button appears when zoom on the image is applied.
The above-described behavior is actually typical for many none multi-resolution players, where the original heavy image is entirely loaded at 100% zoom. With AJAX-ZOOM viewer, however, the user does not have to wait until this large image is fully loaded. AJAX-ZOOM loads only that part of the zoomed image, which is visible on zoom, and the view gets sharp immediately without the user need to download several megabytes of unrequested data volume. On fast connections, the user will not even notice that this part of the image is downloading because the corresponding "image tiles" are loaded while zooming transition runs, and the tiles are faded in straightly after the zoom animation ends or even earlier while the animation runs.
This reasonably simple concept is mainly used for showing detailed maps online. Google maps use this, and actually, any maps service uses this, as it would be strange if you needed to download the entire world map to view your neighborhood, right? With AJAX-ZOOM, you can take advantage of this technology without really understanding it. Simply use this zoom magic in your online store or product's website and profit from this deep zoom enlargement without worrying about image sizes being too large for a web view. The same is true for mobile users; it simply makes no difference.
It might be worth mentioning at this place that AJAX-ZOOM can also load original images instead of image tiles on zoom.
For this, you just need to activate the AJAX-ZOOM's
Moreover, you can set it the way that for low-resolution images, the original image loads on zoom, while for higher resolution images, the multi-scale tiles technology is applied.
The resolution threshold is adjustable over the same
Similar functionality with mixed content in one viewer (360/3D, video, and regular images) can also be achieved with this extension/example, where depending on the settings, you can enable mouseover zoom or swipe slider as a preview for your high-resolution images.
This product view with multiple source types is handled by the AJAX-ZOOM's
It does not have as many options as the mouseover zoom extension, with which you can achieve a similar look and behavior.
jQuery.axZm360Gallery extension's code, however, is not scrambled, written in a simple way, and a developer can extend it in case there is a need for any changes involving code modifications.
The data about the items AJAX-ZOOM has to load into this swipe gallery is provided to the
galleryData option and may look like this:
galleryData: [ ['imageZoom', '/pic/zoom/animals/animals_014.jpg'], ['imageZoom', '/pic/zoom/boutique/boutique_015.jpg'], ['imageZoom', '/pic/zoom/boutique/boutique_013.jpg'], ['image360', '/pic/zoom3d/Nike_Running'], ['image360', '/pic/zoom3d/Teva'], ['image360', '/pic/zoom3d/nike'], ['imageZoom', '/pic/zoom/boutique/boutique_014.jpg'], ['imageZoom', '/pic/zoom/boutique/boutique_015.jpg'], ['youtube', 'q57I1n4s5Hg'], ['vimeo', '78673338'], ['dailymotion', 'x144odn'] ]
The gallery script preserves the order of the items from the
Following are the possible media types within this extension, but as already mentioned, you can add your own if required.
Please find the complete documentation of the plugin options at the bottom of the underlying multimedia example.
As a programmer, you just need to retrieve the required data from the database or other sources,
That should not be a big deal if it is about plain images.
Mostly, you will even find this data in template variables of your system.
However, be aware that the image paths you will find may not be the paths you are really looking for.
What you are looking for are the source images and not already resized, cached images.
Please double-check that data as it is a common mistake when connecting AJAX-ZOOM to a system.
For 360 images, it depends on the level of integration and efforts you want to spend on this. Firstly, you somehow need to make these 360 images available to AJAX-ZOOM. The easiest solution is to upload them over FTP. Each 360-view into a separate folder. Name those folders, e.g., by ID or SKU of the product, to keep track of them. Now, in the frontend, you can check with a server-side script like PHP if the folder named by the ID or SKU of the product is present. If so, you can pass the path as a 360 item to the extension. This solution does not involve any database interactions and other procedures. Of course, you can go a step or more steps further and provide the administrators the possibility to upload the 360 images over the backend of your system or let them import the images, e.g., from a ZIP file or other sources associated with your workflow.
prevNextAllData option in this particular multimedia extension enabled, it is furthermore possible
to switch between different types of data (video, 360 / 3D, plain images) over left/right buttons,
which also works at fullscreen mode as it does work in the box view.
jQuery.axZm360Gallery extension also supports "hotspots" (clickable markings/layers placed over an image) for the 360/3D views and plain gallery images.
You can create hotspots via the hotspot editor, but there is also a possibility to construct them from alternative sources.
Read more about hotspots here.
Please note that despite looking complicated at first glance, you can easily integrate the editor into the backend of your system.
Currently, applying 360 product tours
jQuery.axZm360Gallery extension is not implemented.
However, this extension supports product tours,
and you should consider using it when you require uncomplicated and always a well-maintained solution for presenting 360 product tours together with plain images and videos in one media viewer.
Generally, we recommend looking through the many AJAX-ZOOM examples and select one whose functionality most fits your requirements, and start working with it. Please note that the behavior and layout are all changeable via extension options, general AJAX-ZOOM options, and CSS.
An example of product 360 views together with flat images and videos within a responsive full-page layout. The media viewer covers the most space of the viewport.
In this particular example, the thumbnails gallery does not use any sliders.
However, since this media viewer is loading over
$.axZm360Gallery plugin / extension for AJAX-ZOOM,
there are several options to display the gallery in a different way.
To pass the media sources to the plugin, you would use one of its options too. This option is of type array and the gallery preserves the order of the items. Two other options define the selectors of the containers into which the gallery and the viewer have to load. These three configuration settings are sufficient to display your media in one viewer instance.
There are several other AJAX-ZOOM examples using this plugin. For documentation and full options list, please see example29.
AJAX-ZOOM extension to display 360 product views or 3D product views together with flat images in one viewer.
Optionally add Videos from Youtube, Vimeo, and Dailymotion . You can also add other content to display within the iframe or invoked by AJAX request .
The gallery shows a thumbnail for each item. It retrieves cover images for videos and 360 images automatically. For alternative content you can define destinctive icons to display in the gallery.
The HTML markup and CSS for the viewer is not too abundant. To define content that you want to show in the gallery you only need to fill one data option. It is an array where you can set the type and the source of each item. The gallery preserves the order of items in the array.
The entire code of the extension is open for editing by developers.
Clean (without too much redundant code) example for media gallery with 3D / 360-degree product spins, flat images, videos, and other content.
In this example, the media gallery covers the entire browser window and can further expand to fullscreen view.
If you want to integrate this gallery but have limited access to the frontend template, you may want to implement this example using a responsive iframe element. The gallery will adjust to the size of the iframe automatically.
In this case, you need to synchronize the resizing operations by using the AJAX-ZOOM
$.fn.axZm.resizeStart API method.
You do not have to do anything if the size of the responsive container depends only on the size of the browser window.
In this case, the viewer will adapt to the size of the container automatically.
In this example, AJAX-ZOOM media gallery settings are set in the way that for 360 views the user has only the possibility to spin a product at none-zoomed state. On mouse click or double tap, the media viewer zooms to the maximal zoom level, which is 100% of the original image resolution.
At this zoom state, the second click or double tap on touch devices makes the viewer zoom out. The entire image is visible again.
There is nothing special about these features except the loading time of the zoomed view. Because of AJAX-ZOOM using the image tiles technology it does not need to load the entire high-resolution image when the user wants to see a portion of it. What it does is streaming only the small part of the viewport, which is visible to the user. You can, however, disable this tiles option and enable the AJAX-ZOOM "simple mode" feature, which loads the entire source image as most of the similar software solutions do.
What is also different in this example is that in contrast to other example29 the items gallery shows at full-screen mode as well.
This is a preference option in the
$.axZm360Gallery AJAX ZOOM extension.
This is one of the most progressive zooms 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 is displayed as a swipe slider on mobile devices and a zoom on hover plugin on desktops.
The images in the zoom window and the swiping images are not the original high-resolution source images. The high-resolution photos display when the user clicks on that preview. At full-screen or responsive modal box views, the original image shows inside the AJAX-ZOOM viewer. It is further possible to swipe between the images and switch between other media types in these extended views.
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. A fixed position is also possible.
We integrate this extension into all our modules for shopping carts. It replaces the default image viewer on 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, making a big difference when putting them together. You will also be able to switch between a few interesting options and immediately view the changes. At the bottom of this page, you will find complete documentation and some example codes.
Enabling "axZmMode" option of the hover zoom extension makes it act like 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 different configuration options at the backend.
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.
Integration of the AJAX-ZOOM mouseover extension into fictive products detail page with a color swatch feature. The color swatch is the working part of this product detail page mockup. You can change a few important configuration settings and watch the changes happen immediately.
Integration of the AJAX-ZOOM mouseover extension with an modal APP container extension. The extension opens on click and loads a definable item in the gallery as first.
Using the modules/plugins is optional! It is not required to use them. You can use AJAX-ZOOM as a stand-alone application or integrate it manually into nearly all systems.
However, if a module for your CMS or e-commerce/shopping cart system is available, it tremendously facilitates and speeds up the integration. Provided that your server meets technical requirements, you can have AJAX-ZOOM up and running within a few 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, and 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 the AJAX-ZOOM image viewer on a domain. Unlimited options are available. The costs for the regular licenses are one-time payments! 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 need to have Skype installed on your device. In case live support over Skype is not available immediately, please leave us a message or send an email by using the contact form.
We answer every inquiry or question that relates to the AJAX-ZOOM software!