Release date: July 21st, 2017
Current version: 5.0.3
Change log

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.

Click here to overview all examples without descriptions

360° Spin / 3D rotate

Responsive jQuery Mouseover Zoom together with AJAX-ZOOM fullscreen or lightbox on click & optional 360°/3D object spins with zoom! Prior to Ver. 4.0 of this AJAX-ZOOM mousehover zoom extension it was optionally responsive for the flyout window. The actual "preview image" was not really responsive. In this new mousehover zoom extension Ver. 4.0 everything is absolutly responsive now.
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.

Derived examples:
Create cropped thumbs gallery with additional descriptions of the cropped area.

Derived Examples:
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 image (depending on what is loaded in the player). The Result - a JavaScript file with JSON can be loaded into any other example of AJAX-ZOOM on this page.

Just the player with hotspots:
API $.fn.axZm.loadAjax360Type; injects new 360 of the same size keeping same zoom level and frame number. Perfect for 360 product configurators.
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. Test it on iPad!

Clean examples:
An example of AJAX-ZOOM 360 placed inside a container with dynamic width and height.
Responsive 360° / 3D Spin & Zoom
High resolution animation zoom & pan, timeline, selected key frames.
In this example AJAX-ZOOM is loaded into the maximized lighbox (Fancybox). The sizes of the Fancybox and AJAX-ZOOM player inside are determined by the window size. This example can also serve as tutorial on defining the content to load into AJAX-ZOOM player. Ver. 4.0 - image or 360 can be maximazied to Fullscreen now!
Very simple example of how to open AJAX-ZOOM as fullscreen onClick. Only couple JS tags in head necessary to get started.
3D Spin & Zoom. Easy implementation - pass the path of the folder with images. Everything else will be done instantly.

Derived Examples:

Mouseover Zoom

Responsive jQuery Mouseover Zoom together with AJAX-ZOOM fullscreen or lightbox on click & optional 360°/3D object spins with zoom! Prior to Ver. 4.0 of this AJAX-ZOOM mousehover zoom extension it was optionally responsive for the flyout window. The actual "preview image" was not really responsive. In this new mousehover zoom extension Ver. 4.0 everything is absolutly responsive now.
Simulation of the zoom effect used in many web shops - hover over the image zoom, additionally with fullscreen zoom. The resolution and quality of the source image are unlimited, as only the needed image tiles need to be loaded. In this constellation a truly unique effect.

Nur der Player:
Experiment: Outer image map same size as initial image.
Responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click

Responsive / Adaptive

An example of AJAX-ZOOM placed inside a container with dynamic width and height.
Create cropped thumbs gallery with additional descriptions of the cropped area.

In this example AJAX-ZOOM is loaded into the maximized lighbox (Fancybox). The sizes of the Fancybox and AJAX-ZOOM player inside are determined by the window size. This example can also serve as tutorial on defining the content to load into AJAX-ZOOM player. Ver. 4.0 - image or 360 can be maximazied to Fullscreen now!
Responsive 360° / 3D Spin & Zoom
Responsive jQuery Mouseover Zoom together with AJAX-ZOOM fullscreen or lightbox on click & optional 360°/3D object spins with zoom! Prior to Ver. 4.0 of this AJAX-ZOOM mousehover zoom extension it was optionally responsive for the flyout window. The actual "preview image" was not really responsive. In this new mousehover zoom extension Ver. 4.0 everything is absolutly responsive now.
Loads a set of images, e.g. an old book or newspaper and allowes to search keywords, visually highlight the results and zoom to these hotspots.
AJAX-ZOOM opens at fullscreen mode when page is loaded.
360 degree product spin with hotspots loaded into parent container with responsive width and height. This could be a gallery or anything else which can be loaded into AJAX-ZOOM player.
Responsive hover thumb zoom gallery. Responsive hover thumb zoom gallery
Responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click
An example of AJAX-ZOOM 360 placed inside a container with dynamic width and height.

Lightbox & Co.

Open AJAX-ZOOM player in a lightbox from a simple link as Ajax invoked content. The content can be 360 degree or 3D animation, a gallery or just a simple high resolution image.
In this example AJAX-ZOOM is loaded into the maximized lighbox (Fancybox). The sizes of the Fancybox and AJAX-ZOOM player inside are determined by the window size. This example can also serve as tutorial on defining the content to load into AJAX-ZOOM player. Ver. 4.0 - image or 360 can be maximazied to Fullscreen now!
Responsive hover thumb zoom gallery. Responsive hover thumb zoom gallery
Responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click
DemonstrationOpen AJAX-ZOOM in a lightbox from a simple link as iframed content. Right now this is the only possible solution to make AJAX-ZOOM work cross domain, e.g. in eBay auctions.
An example of creating a simple external gallery and open a lightbox with AJAX-ZOOM by clicking on the thumbnail.

Tutorial

In this selection you will find some simple examples suited as tutorial. The very first example is really recommended as it gives a nice overview about different methods of defining images to load into the player. These methods can be then applied to all other examples as well.

In this example AJAX-ZOOM is loaded into the maximized lighbox (Fancybox). The sizes of the Fancybox and AJAX-ZOOM player inside are determined by the window size. This example can also serve as tutorial on defining the content to load into AJAX-ZOOM player. Ver. 4.0 - image or 360 can be maximazied to Fullscreen now!
This is a short Tutorial of how to load AJAX-ZOOM only with JavaScript, which for example could be inserted into WYSIWYG editor.
Very simple example of how to open AJAX-ZOOM as fullscreen onClick. Only couple JS tags in head necessary to get started.
Short tutorial on how to quickly define one or more images and embed AJAX-ZOOM into PHP page with PHP.
Embed AJAX-ZOOM with the help of a custom loader script. Needs only a couple lines of code. The loading page does not need to be PHP.

Galleries

AJAX-ZOOM has three integrated gallery types. They can be activated and configured by setting corresponding options in the config file. In addition AJAX-ZOOM can be fully controlled with the API "from outside". This allows integrating AJAX-ZOOM with any other image display plugins or your own code. A very interesting feature is also the ability to parse entire folders and instantly display the images as a gallery. Of course only certain images can be defined for display as well.

Responsive hover thumb zoom gallery. Responsive hover thumb zoom gallery
This jQuery image slider is a wrapper and extension of AJAX-ZOOM jQuery plugin. The extension adds diverse functionality like bullet navigation to AJAX-ZOOM by using several callbacks and AJAX-ZOOM API. Because the code is written very simple it might be demonstrative for developers who whish to extend AJAX-ZOOM to suit their own needs.

Derived examples:
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.

Derived examples:
External description of the images in the gallery, "numbers" navigation and other API implementations.
An example of AJAX-ZOOM 360 placed inside a container with dynamic width and height.
This example returns a Thumbnail gallery after instantly parsing a folder looking for images. Bei clicking on the thumbnails AJAX-ZOOM opens at fullscreen mode with this particular image in high resolution.
No toolbar, image map outside, zoom slider enabled, custom navi using api functions, custom gallery, free html layout.
AJAX-ZOOM (for developers) tagging images with hotspots, adding title and description; $.fn.axZm.createNewHotspot() API tutorial
Demonstration of the methods jQuery.fn.axZm.zoomSwitch() and jQuery.fn.axZm.loadAjaxSet() to switch single images or entire image sets.
An example of creating a simple external gallery and open a lightbox with AJAX-ZOOM by clicking on the thumbnail.
Embedded example. Also contains a demonstration of how to externally load a different set of pictures into AJAX-ZOOM without reloading the page. Custom frame around AJAX-ZOOM.
Responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click

Fullscreen

Very simple example of how to open AJAX-ZOOM as fullscreen onClick. Only couple JS tags in head necessary to get started.
AJAX-ZOOM opens at fullscreen mode when page is loaded.
360 Spin & Zoom loaded as Fullscreen. 3D animations can be loaded as well.
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.

Developer

AJAX-ZOOM offers to developers a variety of methods to create a customized application. With the provided API, callbacks and global vars you will be able to develop your own implementation for a very broad field of use. In any case we will be glad to indicate you the direction for the start. Alternatively we can create your individual application as a custom work.

For developers - intoducing callback functions. The demonstration shows callbacks in a browser HTML console as an example.
A demonstration of the jQuery.fn.axZm.zoomTo() method, which lets You to zoom into the 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 of the original image.
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 image (depending on what is loaded in the player). The Result - a JavaScript file with JSON can be loaded into any other example of AJAX-ZOOM on this page.

Just the player with hotspots:
Create cropped thumbs gallery with additional descriptions of the cropped area.

Derived Examples:
AJAX-ZOOM (for developers) tagging images with hotspots, adding title and description; $.fn.axZm.createNewHotspot() API tutorial
This jQuery image slider is a wrapper and extension of AJAX-ZOOM jQuery plugin. The extension adds diverse functionality like bullet navigation to AJAX-ZOOM by using several callbacks and AJAX-ZOOM API. Because the code is written very simple it might be demonstrative for developers who whish to extend AJAX-ZOOM to suit their own needs.

Derived examples:
Loads a set of images, e.g. an old book or newspaper and allowes to search keywords, visually highlight the results and zoom to these hotspots.

New examples

API $.fn.axZm.loadAjax360Type; injects new 360 of the same size keeping same zoom level and frame number. Perfect for 360 product configurators.
Create cropped thumbs gallery with additional descriptions of the cropped area.

Create cropped thumbs gallery with additional descriptions of the cropped area.

Derived Examples:
Loads a set of images, e.g. an old book or newspaper and allowes to search keywords, visually highlight the results and zoom to these hotspots.
360 degree product spin with hotspots loaded into parent container with responsive width and height. This could be a gallery or anything else which can be loaded into AJAX-ZOOM player.
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 image (depending on what is loaded in the player). The Result - a JavaScript file with JSON can be loaded into any other example of AJAX-ZOOM on this page.

Just the player with hotspots:
Responsive jQuery Mouseover Zoom together with AJAX-ZOOM fullscreen or lightbox on click & optional 360°/3D object spins with zoom! Prior to Ver. 4.0 of this AJAX-ZOOM mousehover zoom extension it was optionally responsive for the flyout window. The actual "preview image" was not really responsive. In this new mousehover zoom extension Ver. 4.0 everything is absolutly responsive now.
This jQuery image slider is a wrapper and extension of AJAX-ZOOM jQuery plugin. The extension adds diverse functionality like bullet navigation to AJAX-ZOOM by using several callbacks and AJAX-ZOOM API. Because the code is written very simple it might be demonstrative for developers who whish to extend AJAX-ZOOM to suit their own needs.

Derived examples:
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.

Derived examples:
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.
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. Test it on iPad!

Clean examples:
In this example AJAX-ZOOM is loaded into the maximized lighbox (Fancybox). The sizes of the Fancybox and AJAX-ZOOM player inside are determined by the window size. This example can also serve as tutorial on defining the content to load into AJAX-ZOOM player. Ver. 4.0 - image or 360 can be maximazied to Fullscreen now!
Responsive 360° / 3D Spin & Zoom
Load AJAX-ZOOM in an iframe. The simplest way to implement AJAX-ZOOM anywhere. Cross-domain capable.
AJAX-ZOOM (for developers) tagging images with hotspots, adding title and description; $.fn.axZm.createNewHotspot() API tutorial
Responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click
Responsive hover thumb zoom gallery. Responsive hover thumb zoom gallery

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