Click on the buttons below to open a single image, images gallery or 360-degree images in a modal box, full browser window or fullscreen.
As viewer content, you are able to choose a single high-resolution image, a set of images with or without thumbnails gallery or a 360-product view. There are many examples within the provided on this page to explore this functionality.
For opening AJAX-ZOOM viewer in "responsive modal box" with images or 360 product views, please see example27. There you will also find several methods of how to pass data to AJAX-ZOOM in diverse ways.
Indeed, the "responsive modal box" is "Fancybox" version 1.3.4, which has been modified to behave responsively. The box can also open AJAX-ZOOM within an iframe. You can find the example with code triggering AJAX-ZOOM as iframed content in example2. Also, we are planning to make more examples with newer modal box scripts. Feel free to make suggestions! The one we found interesting is "izimodal.js". However, until now the modified "Fancybox" proved to behave well with Bootstrap, CSS3 and HTML5 in modern Browsers.
We also use this basic AJAX-ZOOM ability to open in many ways in our diverse extensions, created to facilitate common tasks of placing and presenting 360 images and plain image galleries. Below is an example of responsive thumbnails gallery, which loads over one of these extensions with just a few lines of code.
You can choose to load all images from a specified folder or provide a list of image paths from different folders. When choosing to load all images a specified folder, AJAX-ZOOM will add images uploaded later automatically. It will create the thumbnails instantly and when the user clicks on one of these, the image opens in AJAX-ZOOM viewer in a way you have specified it within the options of that particular extension.
By default, AJAX-ZOOM viewer loads then these high-resolution images progressively using the multi-scale technology with image tiles, so even ultra-high resolution images are viewable by your customers without the delay of having to wait for downloading the entire image data. However, you can also disable the multi-scale presentation with image tiles and load original source image on zoom or, depending on screen resolution and screen density, without being zoomed. In this case, a smaller representation of the large image as a whole will still load at first, giving the customer the ability to see it quickly in some detail.
The AJAX-ZOOM example files, where you can find this
extension and the documentation of its options are
All these examples and additional AJAX-ZOOM extensions are included in the download.
Open AJAX-ZOOM in a lightbox / modal window from a link (click event) within an iframe.
The content can be a 360-degree product spin, 3D product view, a gallery or one plain image. The example uses Fancybox and Colorbox to illustrate the procedure.
Open AJAX-ZOOM player in a lightbox / modal window from a link (click event) as AJAX invoked content.
The content can be a 360-degree product spin, 3D product view, a gallery or one flat image. The example uses Fancybox and Colorbox to illustrate the procedure.
An example of creating a responsive image grid gallery with thumbnails and show large images on click using AJAX-ZOOM.
The AJAX-ZOOM image viewer can open in a modal window (responsive Fancybox), as an overlay of the full browser window or at fullscreen.
$.azThumbGallery extension / jQuery plugin.
The options of this plugin include pagination, thumbnails size, number of thumbnails in a row and many other useful features.
Responsive thumbnails gallery with hover zoom effect and various other options.
On click, the AJAX-ZOOM viewer opens in a lightbox such as responsive Fancybox. The viewer can also open at fullscreen or as full browser window overlay.
Responsive inline images with hover zoom effect and progressive zoom feature on click. The AJAX-ZOOM viewer with progressive zoom feature opens in responsive lightbox or at fullscreen.
You can also configure the extension to replace the entire image with AJAX-ZOOM viewer on click. The viewer fills the space of the image. The user can close the viewer and restore the inline image.
In the example, you can switch between these diverse opening modes.
It is great for editorial content because the HTML essentially consists out of an "img" tag. Editors can easily insert this tag into text via WYSIWYG editor of any CMS.
Another representation of the
$.azThumbGallery plugin / extension for AJAX-ZOOM.
In this example, the plugin retrieves a list of subfolders from a definable parent folder.
It then depicts each subfolder as a three icons layout.
Each of the three icons is a very small thumbnail of an image from the respective subfolder. Thus, before clicking on a folder the user already gets an idea about what is inside.
After clicking on a folder icon, images from this folder show as thumbnails below or wherever else. It is an adjustable option of the plugin. There are also many other options, which for example manage the size of the thumbnails or properties of the responsive thumbnails grid. You can also enable pagination so that the thumbnails always display in one row.
When the user clicks on one of the thumbnails, the high-resolution image opens at full screen or inside a responsive modal window with deep zoom and pan functionality.
In this example, AJAX-ZOOM loads into responsive Fancybox by a click.
For invoking AJAX-ZOOM with Fancybox in such a way, we have created a wrapper extension.
$.openAjaxZoomInFancyBox plugin triggers and manages the AJAX-ZOOM viewer inside the Fancybox.
It also makes the first generation Fancybox responsive.
This example can also serve as a tutorial about defining the content that you want to load into AJAX-ZOOM viewer! It lists by example all possible query string parameters (zoomData, zoomDir, 3dDir, zoomFile, and zoomID). These are the parameters AJAX-ZOOM supports out of the box to define flat images and paths for the 360 viewer. The example also explains how you can compress the parameter values. Compressing helps to hide direct image paths from exposing them to the public and shorten the length of the query string.
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 displays as a swipe slider on mobile devices and as the 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 views, the original image shows inside the AJAX-ZOOM viewer. In these extended views, 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. A fixed position is also possible.
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 putting 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 full documentation and some example codes.
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.
This is a tutorial describing the basics of AJAX-ZOOM handling. It is a very simple but useful demonstration of how to open the AJAX-ZOOM 360/3D viewer or gallery with flat images at full-screen mode using on click event attached to any HTML element.
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 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!