AJAX-ZOOM has many possibilities to create pure picture galleries. Above you can see a gallery with "internal" thumbnail slider. Per options, you can arrange the slider vertically left / right or horizontally at bottom / top from gallery canvas.
Internal galleries load within the picture viewer box and all the internal calculations aim to preserve exact fitting of the viewer inside its parent container. Therefore, if parent container has certain proportions defined by your CSS, the viewer will exactly fit into this html element and resize itself if that responsive parent container will change its size too.
AJAX-ZOOM generates thumbnails and all other necessary smaller representations of the larger source image automatically and caches them in specified directory. There are several predefined methods to determine the array of images to load into the gallery. You can pass a list of individual image paths or you can specify a local path to a folder from which AJAX-ZOOM will instantly read all supported image types and add them to the gallery.
There are three types of integrated galleries: vertical, horizontal and "inner gallery". The inner gallery appears over the viewer canvas, whereas the vertical or horizontal gallery places itself outside. There is a button located in all types of toolbars offered by the player, which triggers the inner gallery view. However, you could also trigger or toggle inner gallery just with AJAX-ZOOM API.
Per AJAX-ZOOM options, you can chose if you want to show the vertical or horizontal gallery types in embedded player like above, display it only at fullscreen view or both. Same selection choice applies to the optional navigation toolbar below the player or completely remove it.
As an alternative to the navigation bar there are built in over the image buttons,
which are configured with the mNavi option.
It is very flexible and you can even place it outside of the player wherever you wish it to be.
The order of the buttons, the size and the selection are easily set within
mNavi option located in the config file
mNavi is available there as
In addition, within
mNavi you can configure your own buttons and associate them with your custom functionality.
These custom buttons integrate seamlessly by the order you define within the set of default buttons
and they have the same mouse interaction behavior as default buttons you can choose to display from default functionality.
For instance, in this example ,
mNavi buttons are placed under the player only in not fullscreen view and there is an additional custom button,
By the way, you can easily add clickable hotspots to all or just some images in this swipe gallery by comfortably creating them via online hotspot editor, which is a supplement of the viewer and included in the download package. Dynamically creating the hotspots is also possible with AJAX-ZOOM hotspot API; however, it is more a programmer type of a task. Read more about hotspots. Read more about hotspots.
Embedded zoom viewer with thumbnails gallery. It has a navigation bar below the viewer to load different images from several folders. The navigation bar uses bootstrap "navbar" CSS construct and it is not integral part of the viewer.
This example also demonstrates
$.fn.axZm.loadAjaxSet AJAX-ZOOM API method.
With this method, you can replace images already loaded into the viewer.
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 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 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. User can close the viewer and restore the 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.
In this example, thumbnails of large images from different folders load into responsive grid outside of the zoom viewer. The AJAX-ZOOM viewer displays to the side of the thumbnails in a different container. Thumbnails in gallery respond to clicks and loads high-resolution image into the zoom viewer.
All code is wrapped into a single
$.azThumbGallery jQuery plugin, which is one of AJAX-ZOOM extensions.
All you need is to pass image paths via options of the extension and define the containers where you want the gallery and the viewer to appear.
The extension has several other options to fine tune the appearance of the entire composition.
This example also contains external controls to show basic usage of AJAX-ZOOM API.
With the controls you can switch to next or previous image using
In this example, the plugin requests images in subfolders of a specified top folder. It then generates a select form element or folder icons, which represent the subfolders. When you select a sub folder, all images from this sub folder load as thumbnails next to the zoom viewer. You can then view these images in AJAX-ZOOM image viewer one by one.
All code is wrapped into single
$.azThumbGallery jQuery plugin, which is one of AJAX-ZOOM extensions.
The plugin has options to define HTML containers for folders, thumbnails and the image viewer.
It arranges all elements inside the containers in responsive way. You can limit the number of thumbnails by pagination option. Several other options are available to change the look and formation of the elements.
This example is about "image map", placed outside of the viewer. Image map is a small representation of the image, which stays not zoomed and where the user sees what part of the main image is being zoomed. The user can also drag the small rectangular indicator within the image map and thus pan the large, zoomed image in the viewer. The default placement of the image map is inside the viewer. Here, it is outside.
Besides placing the map next to the image, in this example you can also set the options to put it automatically in place of the selected thumbnail in the thumbnails gallery.
All code is wrapped into
$.azThumbGallery extension and you can control it by options or extend it.
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 in 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 responsive modal window with deep zoom and pan functionality.
This is AJAX-ZOOM viewer in a full page responsive layout. It fills the entire viewport and prevents page scrolling on desktop.
The plain image zoom viewer contains the optional thumbnails gallery. It can be vertical, horizontal or absent. As of viewers UI, only zoom in and zoom out buttons appear inside the viewer.
The example also shows
$.fn.axZm.loadAjaxSet API method for replacing images in the viewer.
You can load and replace with images from a particular folder or you can load a set of images from different locations.
The height of the parent container for AJAX-ZOOM uses CSS
calc() function with
But even with bootstrap, unless you set the parent containers height e.g. with embed-responsive and embed-responsive-item classes defining the proportions, it is necessary to make sure that the parent container has a calculated height value. Otherwise, a responsive AJAX-ZOOM viewer implementation will not be able to fit into the parent container, as it will not be able to determine its height. The height will be zero and thus AJAX-ZOOM not visible or it will overlap the container and break you design.
An example of product 360 views together with flat images and videos within 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.
One of the options is an array through which you pass all types of media sources to the plugin. The order of the items is preserved. 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.
At first glance, this example seems overloaded with user interfaces and information. It is, however, there to evoke some possibilities of the API when dealing with image descriptions.
Below the main image slider, there are title and description of the image. They also show at full screen mode. Setting the titles and descriptions is what it is mainly about in this example.
The code in this example also illustrates that you can automatically build custom UI elements out of data provided by the API of the viewer and use the API methods to trigger e.g. image switching.
Unique to this example is that it shows two-column vertical gallery. This is a matter of AJAX-ZOOM configuration options and you can set it in every other example too.
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!