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
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 | |
Responsive design
| An example of AJAX-ZOOM placed inside a container with dynamic width and height.galleryresponsive | |
Lightbox & Co.
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.
| This is a short Tutorial of how to load AJAX-ZOOM only with JavaScript, which for example could be inserted into WYSIWYG editor.tutorial | |
| Short tutorial on how to quickly define one or more images and embed AJAX-ZOOM into PHP page with PHP.tutorial | |
| 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 | |
| External description of the images in the gallery, "numbers" navigation and other API implementations.zoom gallerygallery | |
| 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 | |
| No toolbar, image map outside, zoom slider enabled, custom navi using api functions, custom gallery, free html layout.galleryexternal gallery | |
| 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 | |
| Demonstration of the methods jQuery.fn.axZm.zoomSwitch() and jQuery.fn.axZm.loadAjaxSet() to switch single images or entire image sets.galleryexternal galleryimage set | |
| 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 | |
Fullscreen
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 | |
| 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 | |
| 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. | |
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.
|
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.
|
|
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)
Leave a Comment
Thanks for your help.
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.
Can this software cope with these requests ?
Many thanks
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.
I appreciate it!
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.
I want to know that is it possible that crop the image which is zoom using ajax zoom .
My Intension is to crop, rotate, zoom and move and then save it
to mysql data table.
Hope you will reply soon.
haven't found out yet (if possible) how to add my ajax-zoom in such a way that it can be used inside/embedded in a forum, but my players love the new way of displaying the maps!
it is the best upgrade for my website in a long time!
Thank you.
I'm wondering if the ajax-zoom software is usable for a project I'm working on. I see that I can load the zoom-objects from a mysql database, but what I'm really looking to do is to load the filenames of the zoomtiles from a database. I already have a database I'm working with, I'm just curious if that's within the scope of what the ajax-zoom software will allow me to modify.
Thanks,
Joshua
and also how to stop the image from centering when the image is clicked.
thanks
where is the annotation feature please?
------------------------
Hi Knacky, an annotation feature is already implemented. You can annotate in multimple places with a background and font(s) of your choice (ttf). Please check the documentation :-)
Also will the hotspots be able to: display swf, images, url links, video, html?
Thanks again
For example, I have a map with a church on it. As well as the hotspot on the image (map) the church would also be clickable for the navigation side bar, acting like a shortcut.
That make sense?
Thanks
Thanks
I've been looking at various different programs like yours today and have got myself a little mixed up!
Thanks
http://www.xtc-load.de/2010/08/ajax-zoom-fur-xtcommerce/
I like the solution with iframe. Do you have a demo I can put into my iframe to show to my boss until I hopefully get him convinced to buy this beautiful toy :o)
is it possible to have links in the images, specifically referring to the new spin feature. i am aiming to create a 3d graphic that people can rotate and zoom into and then select the section that they wish to view in more detail.
The other way to append a div with the PNG image mask manually, see in this example the way custom toolbar is appended: http://www.ajax-zoom.com/examples/example16.php
Either way - you can get the cropping coordinates with jQuery.axZm.lastZoom object containing all you need to crop and print the original image with your mask on it. For more info take a look at API section in docs.
Will you let me pan to a specific location on an image, i.e. show a small part of the original image like a map
i like ajax-zoom software,but i don't install it on my localhost.
;i use sourceguardian to process installation . such as: http://127.0.0.1/ajax_zoom/loaders/sourceguardian/howto-install.php
Thanks for your support!
br/lbs
I'm Impressed!
If possible, could you forward information or a guide on integration into other CMS systems, I am a developer of custom Drupal modules and would like to create a module to automatically integrateAjax Zoom in to all my forthcoming projects.
If so... that would be extremely nice and a lot of people will use it.
Is it possible to use image maps (e.g. useMap="#map_info") on the big image?
Is it free to use in open source project?
Thanks!
Doc
very.. very.. wonderfull.. :D
Answer: Take a look at this projects website: php-compiler.net and tell me if it worked. Thank you.
$(window).load(function(){setTimeout(function(){$.fn.axZm();}, 1000);});In case you use drawZoomJsLoad class method you need to adjust it accordingly in axZmH.class.php
I've downloaded and tried to use ajax-zoom plugin using JQuery. It works well , except for condition when I refresh my page twice in a very short interval, not allowing my first refresh to complete loading the page. In this case your plugins stuck and hangs the browser. This problem comes every time I double refresh my page. I was planning to buy your product for commercial use, but after seeing this problem , I've taken a step back. I suggest you guys to look into this problem and resolve it because what you have made is really good tool.
:)
Answer: We did not try it yet, but take a look at this projects website: php-compiler.net Did it help?