Release date: September 18th, 2017
Current version: 5.0.9
Change log

About AJAX-ZOOM examples

Following You will find several variations and examples of how to integrate AJAX-ZOOM into Your application. Most examples are included in the ZIP package, which you can download and test for free. The examples in the download package do not contain same images as on ajax-zoom.com but you can easily replace the dummy images with your own.

Filter examples by keywords

Press on a button below to filter examples by a keyword. Click on the screenshots to open the example in a new window / browser tab. Send us a message if you were looking for a keyword but did not find it in the keywords cloud below.

360 / 3D 360 gallery 360 product tour API app autosuggest callbacks / hooks Colorbox color swatch configurator descriptions developer Digital-Asset-Management (DAM) external gallery Fancybox fullscreen gallery hotspots / overlays iframe image compare (before / after) image slider lightbox mouseover zoom multimedia OCR player skins product configuration replace spinTo tutorial video Youtube zoomTo
example2
Open AJAX-ZOOM in a lightbox from a link (click event) as iframed content. The content can be 360 degree or 3D animation, a gallery or just a simple high resolution image. Fancybox and Colorbox are used as examples to illustrate the procedure.
example3
Open AJAX-ZOOM player in a lightbox from a link (click event) as Ajax invoked content. The content can be 360 degree or 3D animation, a gallery or just a simple high resolution image. Fancybox and Colorbox are used as examples to illustrate the procedure.
example4
Embedded zoom player with gallery and possibility to switch between folders with images. Navigation to switch between the folders with images is built with bootstraps "navbar" instantly. This example is also a demonstration of how to load a different set of pictures over $.fn.axZm.loadAjaxSet API into AJAX-ZOOM player.
example5
An example of creating a simple external image thumbnails gallery and open AJAX-ZOOM player by clicking on the thumbnails. The player can be opened optionally in a lightbox such as Fancybox (also responsive) or full screen / full browser window. The number of thumbnails can also be limited and displayed via page navigation.
example6
Responsive hover zoom thumb gallery with various options. Upon a click on the thumbnail the AJAX-ZOOM player is opened optionally in a lightbox such as responsive Fancybox or immediately at full screen / full browser window.
example6_cms
Responsive image hover zoom (gallery) effect + full screen progressive zoom on click. Besides opening the AJAX-ZOOM player at full screen or responsive Lightbox the embedded image with hover effect can be optionally replaced with AJAX-ZOOM player to display high resolution image in it. You can switch to this mode directly in this example. It is great for editorial content because the HTML essentially consists out of an "img" tag and can be easily inserted via WYSIWYG editor.
example7
In this example several images from different locations are loaded into external gallery. Selected image is displayed in embedded AJAX-ZOOM player. Contains an external control to switch to previous and next images over $.fn.axZm.zoomPrevNext() API.
example8
In this example the plugin generates a select form element or some other html to display the subfolders. When switched thumbnail images from the particular folder are instantly generated and displayed in external area specified for the gallery. Clicking on a thumb switches the image in AJAX-ZOOM player which is displayed next to the external gallery.
example9
Embed AJAX-ZOOM with the help of a custom loader javascript file. Needs only a couple lines of code. The loading page does not need to contain jQuery core script. It will be loaded by this custom loader javascript file if needed.
example10
A demonstration of the jQuery.fn.axZm.zoomTo() method, which lets You zoom into predefined portions of an image with x1, y1, x2 and y2 coordinates. Also with an additional javascript it is possible to retrieve the cropping coordinates related to the original image size. For developers it is also shown how to make thumbnail images via AJAX-ZOOM API functions using these cropping coordinates.
example11
This example is reminiscent of a desktop photo manager and could be used as template for an online photomanager in a DAM system or similar. The page is divided into three adjustable sections with folders, thumbnails and photo viewer with zoom feature. Photo viewer can be triggered full screen.
example12
AJAX-ZOOM (for developers). Dynamically tagging images with markers (hotspots) via AJAX-ZOOM $.fn.axZm.createNewHotspot API. In addition, the user can leave descriptions for these markers. The coordinates of the hotspots and descriptions are shown in this example as JSON in a console. This data can then be stored within your application in the database or e.g. transmitted via "PostMessage" to another client.
example13
Load AJAX-ZOOM in an iframe. The simplest way to implement AJAX-ZOOM anywhere. You can place as many instances on one page as you like. Fullscreen also works on mobile devices. Loading of the content inside iframe can be postponed with "lazyload". The content of the iframe could be an image gallery, a 360/3D product rotation or simply one high-resolution image with progressive zoom.
example14
As a developer, working with / extending AJAX-ZOOM also means that besides API functions you will also use callbacks / hooks to trigger your own JavaScript code at the right moment. In this example, you have the possibility to see all these callbacks triggered and illustrated in a visual console next to the player. You can also see some additional data passed to these hooks which could be e.g. coordinates, zoom level and the like.
example15
Object 360° Spin & Zoom. In this example you will find some background information and many examples of 360° degree object photography. Very easy implementation - pass the path of the folder with images and everything else will be done instantly by AJAX-ZOOM.
example15_clean
Clean (without too much redundant code) implementation of a single responsive 360° / 3D Spin & Zoom. Can be used as source code for your own basic implementation of the player. In the source code you will also find some comments regarding the parameters, e.g. path to the folder with 360° images.
example15_gallery_clean
Another, clean (without much unnecessary code) example of the AJAX-ZOOM 360° degree / 3D Player with a 360° object gallery. The gallery, as well as the Player, are loaded over a small extension, which makes the handling of such implementations easier. The extension is adjustable via various parameters, however this open source code extension can be also edited by your developers to suit your specific needs.
example15_responsive
A responsive 360​​° degree AJAX-ZOOM implementation example, where the size of the player can also be adjusted by JavaScript. When changing the size of the browser window, this is not needed since AJAX-ZOOM adapts itself to the size of the container instantly. This example also shows how to load a different 360° degree product via $.fn.axZm.loadAjaxSet AJAX-ZOOM API by clicking on any HTML element.
example15_fullscreen
Open 360 product rotate player as full browser window on load. The parent container is set to be "body" HTML element. Opening AJAX-ZOOM full screen is not possible without a user triggered event like "click" which is imposed by browser restrictions.
example15_vr9
VR Reel multilevel rotate & zoom example. This fully spherical example uses 9 rows and 90 images per row, making 810 image as total.
example16
Disabled toolbar, "image map" and thumbnails gallery are placed outside of the player, actually free html / css layout. The entire constellation is triggered by $.azThumbGallery extension which is adjustable over several options and can be also adjusted by your developers to suit your needs.
example17
In this example the "image map" is placed outside of AJAX-ZOOM player and has the same size as the player. Can be used as image compare (before / after) with deep zoom. You can dynamically load any amount of image pairs and switch between them by AJAX-ZOOM $.fn.axZm.zoomSwitchQuick API function attached to e.g. buttons or keyboard keys without losing the zoom state of the image. You can also load a row of images (more than two images) from e.g. time-lapse photography and inspect the changes frame by frame.
example18
AJAX-ZOOM embedded image slider with swipe feature and horizontal internal gallery. Furthermore, you can switch between various skins shipped with the package. The skins are editable and extendable meaning that you can create your own skins and apply them even dynamically with JavaScript.
example19
In this 360° animation the internal horizontal gallery is turned on but only selected frames from 360° are displayed in it. When the user clicks on the thumbnail the spin goes to this particular frame. On ajax-zoom.com we have loaded an interesting 360° animation into this example which rather uses a film making technic than a turntable for 360 degree photography. However it is still zoomable into details which also does make sense.
example20
A rather very specific and rare mouseover zoom script with multi-resolution, image tiles technology used in the fly-out window. On default it is turned off for touch devices but you can enable it by setting the options of the extension which triggers this mouse hover effect. On desktop computers the zoom level can be changed by user with the mousewheel.
example21
This example returns a thumbnail gallery after instantly parsing a folder looking for images. When clicking on the thumbnail AJAX-ZOOM opens at fullscreen mode or a lightbox with this particular image in high resolution. The folder overview shows some images containing in a particular folder.
example22
Browser window filled layout with AJAX-ZOOM Player, which occupies the largest part of the window. Vertical (internal) gallery is enabled and the toolbar is disabled. On small screens the gallery disappears, which is adjustable by an option. The entire layout is controlled by simple JavaScript. Images are loaded from different directories and are determined by "zoomData" parameter. The AJAX-ZOOM $.fn.axZm.loadAjaxSet API function allows the images to be exchanged dynamically.
example22_new
An example with AJAX-ZOOM placed inside a container, which has responsive width and height. The dimensions are set with CSS and css media queries breakpoints.
example23
Open AJAX-ZOOM image zoom viewer at full screen (full browser window) mode when page is loaded.
example24
An example of AJAX-ZOOM 360 / multimedia gallery placed inside a browser window filled layout, which is dynamically adjusted by JavaScript.
example25
External descriptions of the photos placed under the AJAX-ZOOM image swipe slider. Additionally there is an internal and two column, vertically arranged miniature views gallery. The descriptions are defined within JavaScript and are exchanged by means of AJAX-ZOOM callbacks / hooks after the image change within the slider. In full-screen mode, descriptions are displayed within / over the Player. In addition, an instantly generated and controlled via API number navigation is placed over the player. The entire code for this functionality is commented and is easy to adapt / extend.
example26
Simple JavaScript based zoom viewer / slider without thumbnail gallery and only toolbar enabled. Additionally some alternative ways of embedding AJAX-ZOOM player into HTML are listed below.
example27
In this example AJAX-ZOOM player is loaded into responsive Fancybox window. The sizes of the Fancybox and AJAX-ZOOM player inside it are determined by the browser window size. The view of an image or 360 object can be farther maximized to Fullscreen directly out of the Fancybox window. This example can also serve as tutorial about defining the content to load into AJAX-ZOOM player.
example28
Load 360° spin tool without navigation bar and all other controls. Instead only two custom buttons are loaded to switch between spin and pan states. This example shows a half spherical (multirow) 3D object, but can be used with regular 360° product spins or 2D images! It has also a detailed explanation about how to prepare and order your images for a 3D multirow object.
example28_clean
Clean (without too much redundant code) example for 3D object.
example29
Display 360° or 3D product animations together with plain 2D high resolution images in one gallery. Optionally add Videos from Youtube, Vimeo or Dailymotion and other content. Everything is controlled over an additional javascript AJAX-ZOOM extension with lots of options. You only have to define your variable data within initializing code of this extension to make things working. However your developers are able to adjust this additional extension to suit your specific needs.
example29_clean
Clean (without too much redundant code) example of multimedia gallery with 3D, 360 degree product spins, regular images and videos.
example29_fullscreen
Open multimedia gallery with 3D, 360 degree product spins, regular images and videos as browser window filled on load.
example29_responsive
Responsive AJAX-ZOOM multimedia gallery example with additional illustration of how to change the size of the player over JavaScript. When changing the size of the browser window, this is not needed since AJAX-ZOOM adapts itself to the size of the container instantly.
example29_responsive_easy
In this example AJAX-ZOOM / multimedia gallery settings are set the way that the user has only the possibility to spin at not zoomed state. Zoom on click goes down to 100%; an other click at fully zoomed state will zoom out again to full view. Recommended example.
example30
Very simple demo of how to open AJAX-ZOOM 360/3D or image as fullscreen on click. Only couple JS files in head necessary to get started.
example31
This jQuery image slider is a wrapper and extension of AJAX-ZOOM jQuery plugin. Needs some overhauling as it was written long time ago and was not changed since then. The extension adds diverse functionality like bullet navigation to AJAX-ZOOM by using several callbacks and AJAX-ZOOM API functions. Main options can be changed within this example to output ready copy & paste code for implementation. Because the code is written very simple it might be demonstrative for developers who whish to extend AJAX-ZOOM to suit their own needs.
example31_responsive
Output of example31 where AJAX-ZOOM is triggered responsive.
example32
Responsive AJAX-ZOOM Mousehover Zoom extension with optional 360° spins, multilevel 3D, videos, product tours and hotspots. It is integrated into the frontend of the AJAX-ZOOM ecommerce modules and is controlled over backend of these modules. This mouseover extension is actually both - a mouseover zoom with hundreds of settings, as well as an image slider, which is turned on by default on mobile devices. Please take a look at this example to learn more about other features. This is the latest Mouseover Zoom extension version, which should be used for new projects!
example32_v3
Legacy mouseover zoom extension version. It is only responsive for the flyout window. Should not be used for new projects.
example32_v4
Depreciated mouseover zoom extension version. Should not be used for new projects. Migration to current version is easily possible.
example33
Unique, Flash free online hotspot editor for AJAX-ZOOM 3D/360/2D player. Useful to define positions of clickable hotspots at each frame (360 or 3D) or just plain 2D images (depending on what is loaded in the player). The Result - a JavaScript file / code, simmilar to JSON but not always valid JSON, can be loaded into any other AJAX-ZOOM example by adding one line of code. It can be stored as JavaScript file or e.g. saved into Database. To display hotspots on 360 or regular images you do not necessarily need this editor. AJAX-ZOOM has numerous API functions to dynamically generate hotspots also from other Data.
example33_clean
Clean (without too much redundant code) example with a 360 degree product presentation, which makes excessive use of hotspots.
example33_fullscreen
Open 360 product rotate player with hotspots as full browser window on load.
example33_responsive
360 degree product spin with hotspots loaded into parent container with responsive width and height.
example34
This is a demo where AJAX-ZOOM hotspots related API functions are extensively used. The task was to create an example where parts of the image could be dynamically highlighted upon OCR data stored in and loaded from XML files. The OCR schemes supported are "hOCR" and "ALTO", whereby it is quite easy to adjust the scripts to support other schemes. We have also extended this example to search within this OCR data and implemented an autosuggest javascript box. It can search within loaded "page" only or entire set of images (books, newspaper, technical drawings...) which contain text. Selecting a word leads to generating a list of pages and matches within the set of pages. Pages, which do not contain a searched word, are instantly hidden from the vertical thumbnails gallery. Selected words are instantly highlighted on a given page and the user can zoom into this word by clicking on dynamically generated buttons. As a developer you are able to extend this demo with your code. A perfect tool for museums, digital archives and other publishers. Especially with the newly introduced gallery swipe feature on all devices it is unbeatable.
example35
Create "managed" 360 degree product tours with the help of this great editor. Once you have used it couple of times you will be able to create these tours without any tecnical background within less than a minute. This, provided your texts for descriptions are ready to be inserted, which could be also omitted. The product tours are also combinable with hotspots and data coming from the hotspot editor, thus making the product presentations limited by your imagination without using costly high-tech technologies... The product tour editor is also integrated into our ecommerce plugins and is loaded into example32 (frontend script) instantly. Within this editor the only thing you really need to do is to select areas of the images which are interisting to explore and hit the crop button. The editor will generate a thumbnails gallery where you can add additional headings and texts; also you can select from a dozen of "zoomTo" and "spinTo" animation types. c A really useful and easy to use tool. Let us know if you have any ideas about how to make it even better... But again it is not necessary to use the editor. AJAX-ZOOM has the API and examples (e.g. example10) which let you create similar effects from alternative Data sources.
example35_adaptive
A template for presenting 360 degree product tours or high-resolution image tours either with a vertical or horizontal gallery. They are switched on and off responsively depending on screen size and screen proportions.
example35_clean
Cropped thumbs (product tour) with vertical gallery.
example35_clean_horizontal
Cropped thumbs (product tour) with horizontal gallery.
example35_gallery
Cropped thumbs gallery (product tour) without slider and free layout
example35_responsive
Responsive template for cropped thumbs gallery (product tour), vertical gallery and resizable player via JavaScript as example.
example36
Introducing AJAX-ZOOM API $.fn.axZm.loadAjax360Type; It will inject a different 360 degree product spin of the same size at place of the loaded keeping zoom level and frame number unchanged. Perfect for 360 product configurators.
example36_widget
A proof of concept, where click on 360 opens same spin in an overlay window. Within this window an interface with "spinTo" buttons and descriptions is created dynamically. All title and descriptions data is defined in a JSON type of object... The commented javascript code uses AJAX-ZOOM API functions and callbacks / hooks but it is not formed into a plugin. It can be viewed and simply copied from page source code.

Comments (2)

Vadim Jacobi 2015-09-16 15:07:30
Vadim Jacobi Abar: please check the ajax calls in webbrowser console, also on other examples. Most likely you will find there a message from AJAX-ZOOM about what is wrong. You can also send us a link with your implementation over contact form so we can debug it and tell you the cause of this error.
Abar Choudhary 2015-09-16 14:22:30
Abar Choudhary I am using example 20, nothing is showing in place of image only showing loading image

Leave a Comment

Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, your personal image will be attached every time you comment.

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!

Live-Support-Chat