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.

6.0+ 2.0+ 2.0+ 1.0+ 9.5+ 2.0+ 4.0+ Pinch zoom, tap zoom,
swipe

360° Spin / 3D rotate

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:
360 gallerygalleryexternal galleryvideoyoutubemultimedia360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
html5 360 iPad zoom
3D Spin & Zoom. Easy implementation - pass the path of the folder with images. Everything else will be done instantly.

Derived Examples:
external gallery360 gallery360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Create cropped thumbs gallery with additional descriptions of the cropped area.

Derived Examples:
hotspot360 hotspotconfiguratorzoomTo360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Cropped thumbs gallery with zoomTo
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:
hotspot360 hotspotconfiguratorzoomTo360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery 360 hotspots player
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 (beta) everything is absolutly responsive now.
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom toolresponsiveFancyboxColorbox360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery mouse over zoom
Responsive jQuery Mouseover Zoom together with AJAX-ZOOM fullscreen or lightbox on click & optional 360°/3D object spins with zoom!

Derived examples:
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom toolFancyboxColorbox360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery mouse over zoom
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:
360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
html5 360 rotate iPad
An example of AJAX-ZOOM 360 placed inside a container with dynamic width and height.
360 gallerygallery360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Liquid layout 360
Responsive 360° / 3D Spin & Zoom
responsiveadaptive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
360° - 3D Spin & Zoom Responsive
High resolution animation zoom & pan, timeline, selected key frames.
360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
High resolution animation zoom
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!
tutoriallightboxFancyboxresponsiveadaptive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Javascript Image Zoom Fullscreen in jQuery Fancybox fluid design
Very simple example of how to open AJAX-ZOOM as fullscreen onClick. Only couple JS tags in head necessary to get started.
tutorialfullscreen360 Produkt Player360 Player360 Produkt drehen3d ObjektVR Objekt
AJAX-ZOOM fullscreen

Mouseover Zoom

Responsive jQuery Mouseover Zoom together with AJAX-ZOOM fullscreen or lightbox on click & optional 360°/3D object spins with zoom!

Derived examples:
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom toolFancyboxColorbox360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery mouse over 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 (beta) everything is absolutly responsive now.
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom toolresponsiveFancyboxColorbox360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery mouse over zoom
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:
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom tool
JavaScript mouse hover zoom
Experiment: Outer image map same size as initial image.
before / afterimage compare
Responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click
hover thumbexternal gallerygalleryresponsiveadaptiveFancyboxColorbox
hover thumb

Responsive / Adaptive

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

hotspot360 hotspotconfiguratorzoomTo360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Cropped thumbs gallery with zoomTo
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!
tutoriallightboxFancyboxresponsiveadaptive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Javascript Image Zoom Fullscreen in jQuery Fancybox fluid design
Responsive 360° / 3D Spin & Zoom
responsiveadaptive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
360° - 3D Spin & Zoom Responsive
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 (beta) everything is absolutly responsive now.
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom toolresponsiveFancyboxColorbox360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery mouse over zoom
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.
hotspotresponsiveadaptiveautosuggestzoomTogallerydeveloperDigital-Asset-Management
library zoom software
AJAX-ZOOM opens at fullscreen mode when page is loaded.
fullscreenresponsiveadaptive
Fullscreen image zoom
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.
hotspot360 hotspotresponsiveadaptive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery 360 hotspots player
Responsive hover thumb zoom gallery. Responsive hover thumb zoom gallery
hover thumbexternal gallerygalleryresponsiveadaptiveFancyboxColorbox
hover thumb
Responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click
hover thumbexternal gallerygalleryresponsiveadaptiveFancyboxColorbox
hover thumb
An example of AJAX-ZOOM 360 placed inside a container with dynamic width and height.
360 gallerygallery360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Liquid layout 360

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.
lightboxFancyboxColorboxlightbox gallerylightbox zoom
javascript image zoom
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!
tutoriallightboxFancyboxresponsiveadaptive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Javascript Image Zoom Fullscreen in jQuery Fancybox fluid design
Responsive hover thumb zoom gallery. Responsive hover thumb zoom gallery
hover thumbexternal gallerygalleryresponsiveadaptiveFancyboxColorbox
hover thumb
Responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click
hover thumbexternal gallerygalleryresponsiveadaptiveFancyboxColorbox
hover thumb
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.
lightboxFancyboxColorboxlightbox gallerylightbox zoomiframe
An example of creating a simple external gallery and open a lightbox with AJAX-ZOOM by clicking on the thumbnail.
galleryexternal galleryimage setlightboxFancyboxColorboxlightbox gallerylightbox zoom

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!
tutoriallightboxFancyboxresponsiveadaptive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Javascript Image Zoom Fullscreen in jQuery Fancybox fluid design
This is a short Tutorial of how to load AJAX-ZOOM only with JavaScript, which for example could be inserted into WYSIWYG editor.
tutorial
javascript zoom asp.net
Very simple example of how to open AJAX-ZOOM as fullscreen onClick. Only couple JS tags in head necessary to get started.
tutorialfullscreen360 Produkt Player360 Player360 Produkt drehen3d ObjektVR Objekt
AJAX-ZOOM fullscreen
Short tutorial on how to quickly define one or more images and embed AJAX-ZOOM into PHP page with PHP.
tutorial
javascript zoom
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.
tutorial

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
hover thumbexternal gallerygalleryresponsiveadaptiveFancyboxColorbox
hover thumb
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:
image slidergalleryzoom galleryconfiguratordeveloper
jQuery image slider
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:
360 gallerygalleryexternal galleryvideoyoutubemultimedia360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
html5 360 iPad zoom
External description of the images in the gallery, "numbers" navigation and other API implementations.
zoom gallerygallery
External description gallery
An example of AJAX-ZOOM 360 placed inside a container with dynamic width and height.
360 gallerygallery360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Liquid layout 360
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.
fullscreengalleryexternal galleryimage set
Fullscreen open javascript
No toolbar, image map outside, zoom slider enabled, custom navi using api functions, custom gallery, free html layout.
galleryexternal gallery
Image map outside
AJAX-ZOOM (for developers) tagging images with hotspots, adding title and description; $.fn.axZm.createNewHotspot() API tutorial
developerhotspot360 hotspotDigital-Asset-Management
tagging images
Demonstration of the methods jQuery.fn.axZm.zoomSwitch() and jQuery.fn.axZm.loadAjaxSet() to switch single images or entire image sets.
galleryexternal galleryimage set
An example of creating a simple external gallery and open a lightbox with AJAX-ZOOM by clicking on the thumbnail.
galleryexternal galleryimage setlightboxFancyboxColorboxlightbox gallerylightbox zoom
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.
galleryimage set
image zoom gallery
Responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click
hover thumbexternal gallerygalleryresponsiveadaptiveFancyboxColorbox
hover thumb

Fullscreen

Very simple example of how to open AJAX-ZOOM as fullscreen onClick. Only couple JS tags in head necessary to get started.
tutorialfullscreen360 Produkt Player360 Player360 Produkt drehen3d ObjektVR Objekt
AJAX-ZOOM fullscreen
AJAX-ZOOM opens at fullscreen mode when page is loaded.
fullscreenresponsiveadaptive
Fullscreen image zoom
360 Spin & Zoom loaded as Fullscreen. 3D animations can be loaded as well.
fullscreen360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
360° - 3D Spin & Zoom
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.
fullscreen360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
html5 360 rotate iPad

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.
developercallbacks
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.
developerzoomTo
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:
hotspot360 hotspotconfiguratorzoomTo360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery 360 hotspots player
Create cropped thumbs gallery with additional descriptions of the cropped area.

Derived Examples:
hotspot360 hotspotconfiguratorzoomTo360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Cropped thumbs gallery with zoomTo
AJAX-ZOOM (for developers) tagging images with hotspots, adding title and description; $.fn.axZm.createNewHotspot() API tutorial
developerhotspot360 hotspotDigital-Asset-Management
tagging images
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:
image slidergalleryzoom galleryconfiguratordeveloper
jQuery image slider
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.
hotspotresponsiveadaptiveautosuggestzoomTogallerydeveloperDigital-Asset-Management
library zoom software

New examples

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

hotspot360 hotspotconfiguratorzoomTo360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Cropped thumbs gallery with zoomTo
Create cropped thumbs gallery with additional descriptions of the cropped area.

Derived Examples:
hotspot360 hotspotconfiguratorzoomTo360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
library zoom software
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.
hotspotresponsiveadaptiveautosuggestzoomTogallerydeveloperDigital-Asset-Management
jQuery 360 hotspots player
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.
hotspot360 hotspotresponsiveadaptive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery 360 hotspots 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:
hotspot360 hotspotconfiguratorzoomTo360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery mouse over 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 (beta) everything is absolutly responsive now.
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom toolresponsiveFancyboxColorbox360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery mouse over zoom
Responsive jQuery Mouseover Zoom together with AJAX-ZOOM fullscreen or lightbox on click & optional 360°/3D object spins with zoom!

Derived examples:
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom toolFancyboxColorbox360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery image slider
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:
image slidergalleryzoom galleryconfiguratordeveloper
html5 360 iPad zoom
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:
360 gallerygalleryexternal galleryvideoyoutubemultimedia360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
html5 360 rotate iPad
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.
fullscreen360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
html5 360 rotate iPad
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:
360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Javascript Image Zoom Fullscreen in jQuery Fancybox fluid design
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!
tutoriallightboxFancyboxresponsiveadaptive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
360° - 3D Spin & Zoom Responsive
Responsive 360° / 3D Spin & Zoom
responsiveadaptive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
tagging images
AJAX-ZOOM (for developers) tagging images with hotspots, adding title and description; $.fn.axZm.createNewHotspot() API tutorial
developerhotspot360 hotspotDigital-Asset-Management
hover thumb
Responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click
hover thumbexternal gallerygalleryresponsiveadaptiveFancyboxColorbox
hover thumb
Responsive hover thumb zoom gallery. Responsive hover thumb zoom gallery
hover thumbexternal gallerygalleryresponsiveadaptiveFancyboxColorbox

Comments (0)

Leave a Comment

Name (required):
Email (required):
Website:
Your comment (no html):
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.