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. This gallery is outside of AJAX-ZOOM player and consists of simple image thumbs. These thumbs can be loader for example into jcarousel jQuery plugin and shown at any place on the page.
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
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
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
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!
tutoriallightboxFancyboxresponsive360 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

New in Ver. 4.0 - jQuery mouse over preview extension with adjustable max. dimensions of the high reslotion image and fullscreen zoom when clicked on the mouse hover preview image. The size of the flyout zoom window can be responsive or fixed height and/or width. Works on iOS and Android.
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom tool
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.
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom tool
JavaScript mouse hover zoom
Experiment: Outer image map same size as initial image.
mouseover zoomflyout zoommousehover zoomzoom by mouseoverimage zoom tool

Responsive design

An example of AJAX-ZOOM placed inside a container with dynamic width and height.
galleryresponsive
Liquid layout
AJAX-ZOOM opens at fullscreen mode when page is loaded.
fullscreenresponsive
Fullscreen 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!
tutoriallightboxFancyboxresponsive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Javascript Image Zoom Fullscreen in jQuery Fancybox fluid design
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 hotspotresponsive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
jQuery 360 hotspots player
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!
tutoriallightboxFancyboxresponsive360 product viewer360 viewer360 product image360 product view360 product spinobject vr3d object360 reelthreesixty
Javascript Image Zoom Fullscreen in jQuery Fancybox fluid design
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!
tutoriallightboxFancyboxresponsive360 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.

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.
image slidergalleryzoom galleryconfiguratordeveloper
jQuery image slider
Display 360° or 3D product animations together with plain 2D high resolution images in one gallery. This gallery is outside of AJAX-ZOOM player and consists of simple image thumbs. These thumbs can be loader for example into jcarousel jQuery plugin and shown at any place on the page.
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
Since Ver. 2.1.2 it is possible to load images into the gallery from different locations. Before all images in the gallery had to be under the same path. The Magento commerce implementation of AJAX-ZOOM uses a similar approach.
gallery
zoom image example
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

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.
fullscreenresponsive
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
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.
image slidergalleryzoom galleryconfiguratordeveloper
jQuery image slider
This is an example for a small custom build extension. The task was to make a calendar as navigation interface for several security cameras. Images are copied to a specified directory by a third party software where AJAX-ZOOM can grab them and sort by date and time. The core files of AJAX-ZOOM have not been modified. Thus the extension is fully updateable.
security cameras

Ecommerce Plugins

Your E-Commerce System not present hier? Please read: practically any other of the examples shown here or combination of them can be easily integrated into most ecommerce systems. The main task is to find out the path of the source / high resolution images e.g. from the template vars and pass them to AJAX-ZOOM, which will do the remaining part of the job instantly.

For 360 degree product presentations it would be wise to transfer them over FTP. The ID of the article can serve as the reference to the folder with 360 images. So from the template one can check with PHP or any other server side language if an folder exists, e.g. /axZm/pic/zoom3d/[ID_of_article] and if yes display a button which will open AJAX-ZOOM in a lightbox or embed the player directly into the page. All you need here is to pass the path to that folder over 3dDir=/axZm/pic/zoom3d/[ID_of_article] parameter. That's it.

product image zoom magento
An implementation of AJAX-ZOOM, Version 2.1.0+ in the demo installation of Magento store. Only one include to add in head.phtml and a replacement of media.phtml in Your templates.

A step by step instruction can be found in the download package (axZm/mods/magento/readme_manual.txt) or here.
product image zoom xt commerce
An implementation of AJAX-ZOOM, Version 2.1.3+ in the demo installation of xt:Commerce store (xtcModified, Gambio, VEYTON 4).

A step by step instruction can be found in the download package (axZm/mods/xtc/readme_manual.txt) or here.
product image zoom Oxid
An implementation of AJAX-ZOOM in the demo installation of Oxid eSales.

A step by step instruction can be found in the download package (axZm/mods/oxid/readme_manual.txt) or here.

Comments (113)

Vadim Jacobi
2013-05-15 16:56:57
Vadim Jacobi
Hello Dave! Basically there is no limit regarding the resolution in commercial version. The DPI does not matter as it is only for printing. So if you want to zoom as close as possible you have to provide AJAX-ZOOM with high resolution images, e.g. 20 megapixels or more if you are using medium format camera. Do not worry; the high resolution images are not loaded into the browser, only the portion of the image being zoomed by the user.
Dave
2013-05-15 16:03:02
Dave
This is a great product and I hope to be using it shortly. I have a question I haven't seen the answer to yet. Perhaps it's obvious and I'm just missing the point but what pixel dimensions or DPI should be uploaded for each image of a rotational sequence, that can be zoomed into, to extreme closeup, and still maintain sharp image quality? My client's product is small but detailed and needs to be shown on a human hand - products are rings - so the widest we would go would be to show the entire hand just past the wrist, then zoom into the ring to show facets on the stone (diamond).

Thanks for your help.
safyhost
2013-03-28 08:47:42
safyhost
really like the zoom option is just amazing..thanks..:)
Vadim Jacobi
2013-02-18 22:31:38
Vadim Jacobi
Hi People. Thanks for all your suggestions and bug reports. We finally released Ver. 4.0 with clickable hotspot support. Take a look at http://www.ajax-zoom.com/examples/example33.php There is an other example which is worth to take a look at: http://www.ajax-zoom.com/examples/example32.php If you have any other suggestions and remarks, do not hesitate to drop us you thoughts.
Vadim Jacobi
2012-09-13 22:01:05
Vadim Jacobi
To all of You who was asking about clickable / mouseover etc. hotspots: the next AJAX-ZOOM version 4.0 will definitely support hotspots! At 2D, 360 and 3D modes, at all zoom levels and at fullscreen mode. Basically it is already working on our prototype, we just need to write an API for handling it (the easy but intriguing part). Hopefully this will be the last new feature among many, many others in version 4.0 so we will be able to present it to You shortly.
vik
2012-08-09 07:24:20
vik
how to save the file? Can it be used with java B/e
Subbu Vadali
2012-07-20 20:35:57
Subbu Vadali
We are looking at this tool to integrate with one of our products and certainly require some customization. A couple of such things are: adding annotations, on demand highlighting of text inside the images etc.. Can you please give me details on what would it cost to add these customizations? We are looking at an unlimited .NET version.
Gerhard
2012-05-21 10:33:08
Gerhard
Hey guys.

Great plugin, but is it possible to integrate it in to a site that does not use PHP or ASP.NET?

We're looking at incorporating this in to a few of our e-commerce sites.
Vadim Jacobi
2012-05-17 21:16:17
Vadim Jacobi
for asp.net please use phalanger. see the docs for more info. thanks
mbw
2012-05-14 17:57:30
mbw
If I install this on php server can I just call the gallery from an ASP.net server? and will it work? Thanks.
chep phim
2012-03-29 09:55:26
chep phim
Very useful for me, its exactly what i need to protect images from my site. Thanks a lot. Please keep it up!
Vadim Jacobi
2012-01-25 23:11:30
Vadim Jacobi
Ed: I do not know if you have seen this example: http://www.ajax-zoom.com/examples/example10.php Maybe this is something for you. Hotspots might be available in one of the next versions...
Ed
2012-01-25 16:53:05
Ed
I am looking for something that will zoom into a site engineers drawing on the web, that has hot spots or links in various locations to show photos or info, perhaps in a popup or another page.

Can this software cope with these requests ?

Many thanks
Marcus Heisler
2012-01-22 15:03:54
Marcus Heisler
Hi.

Could Ajax zoom be used to create 3D interactive data for insertion into ibooks2 books? I'm looking for a way to create 3D interactive objects generated from images for ibooks2. As I understand it (and I'm not a programmer but a biologist) the 3D object format for ibooks2 is based on object models (i.e meshes?). I would like to use photographs rather than an artificially generated mesh to create this kind of interactive object. Any suggestions would be very appreciated.
Life For Rent
2012-01-12 06:49:39
Life For Rent
really like the zoom option is just amazing..thanks..:)
Vadim Jacobi
2012-01-09 12:08:12
Vadim Jacobi
Wil: yes, it is possible to customize the player and turn off certain features. See examples and the docs. If you will have specific questions do not hesitate to contact...
Wil
2012-01-09 03:30:08
Wil
Hi, Is it possible to customize the skin of this plugin and turn off certain features? Just want to know before we buy. Thanks!
Spark
2011-11-28 14:11:35
Spark
Interesting post, after I was only looking for a simple Jquery lightbox-image enlarging script, I found this more sophisticated one.

I appreciate it!
Vadim Jacobi
2011-11-23 15:56:29
Vadim Jacobi
For download the entire image please see here: http://www.ajax-zoom.com/index.php?cid=docs#Download

If you want to download a croped image, see this example with the callbacks: http://www.ajax-zoom.com/examples/example14.php There you will find all needed parameters to process / crop the original image with your custom PHP script.



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.