Quick Demo Example

Latest news

Navigation Interface

• Mousewheel zooms in and out
• Left mouse click zooms in
• Right mouse click zooms out
• Shift + left mouse click zooms out too
• Tool selection: select area for zoom in
• Tool selection: pan within the zoomified image

Introduction

AJAX-ZOOM is a powerful image zoom & pan gallery plugin based on jQuery (JavaScript) and PHP. It is a completely packaged low cost solution¹ to present high resolution images on the web. With over 250 options AJAX-ZOOM is very flexible and can be seamlessly integrated into any website - branding free! AJAX-ZOOM also doesn't require any browser plugins such as Flash, Java or Silverlight. It's all cross-browser javascript and PHP.

AJAX-ZOOM uses a slightly, from traditional approach different technology. This approach makes it possible to not just show high resolution images on the web but also protect them from unauthorized use. Thus AJAX-ZOOM allows photographers and digital stock photography companies to present the real quality of an original sized image without being worry about copyright infringement. Certainly, AJAX-ZOOM is also suitable for E-Commerce, product presentations and other applications, where high quality images make the difference. From version 2.0.0 on it is possible to load image tiles directly.

AJAX-ZOOM does not require any cost-intensive investments in hardware. There is also no need to install a third party imaging server. All You need is a standard web server with PHP or hosting account to make AJAX-ZOOM work on Your website. Besides the "native" PHP GDlib functions AJAX-ZOOM supports ImageMagick® for optimized speed and quality.

AJAX-ZOOM can proceed images "On-The-Fly" or it can batch convert thousands of images with just a couple of steps. This means that AJAX-ZOOM can be integrated into already productive websites filled with any number of products and images within a shortest period of time. Give it a try!

¹ Demo version is free for personal use, commercial starting from € 49,-

Reasons Why

• AJAX zoom is not an ASP (Application Service Provider) application. Everything is on Your server fully controlled by You!
• No recurring costs, free updates.
• Stepless Zoom, Pan and Crop interface with mousewheel support (zoom to point).
• Various image protection options, dynamic watermarking / annotating.
• Source images and tiles never load into cache! The source folders can be .htpasswd protected.
• Powered by the popular jQuery javascript library, which is a future-proof investment.
• No plugins like Flash, Java or Silverlight required.
• Compatible with all major browsers.
• Works with any DOCTYPE, also in quirks mode!
• Skinable over CSS and more than 250 customizing parameters controlling colors, layout, size and behavior. In fact almost every possible option is configurable.
• Branding free. Ajax loader and the background can be replaced with your own images.
• Native PHP GDlib and ImageMagick support.
• Build in galleries: vertical (left, right), horizontal (top, bottom) and "inline", all with a slideshow option.
• Single source imaging - on-the-fly generation of all necessary thumbnails and tiles.
• Batch conversion with a single php file - can easyly be integrated into any CMS.
• Many different ways of integration!
• Several API methods to control behaviors like zoom to a specified image area in this example, load a different photo or entire picture set, thus making AJAX-ZOOM easily extandable.
• Can easily be integrated with or into popular "lightbox clones" that support Ajax content or Iframes.
• All the freedom to generate a php array with the required images - static, dynamic from any database, directory or whatever. Commented examples are provided.

Image Protection

In order to understand why AJAX-ZOOM provides solid protection to your photos it is necessary to understand how image zoom technology normally works:

The most efficient way to provide high resolution imaging on the web can be reached by making an "image pyramid" out of the source image and cut it into small tiles, see the scheme to the right. Whenever the user requests a portion of the image only the needed tiles of a level are sent to the client’s browser. However, since this tiles are loaded by the client's browser or can be accessed over http, they can be easily reassembled (stitched back together), thus restoring the entire original image. To get worse - this procedure can be automated.

In its core AJAX-ZOOM uses the same image pyramid technology, but instead of sending the tiles directly to the browser AJAX-ZOOM can put them first together on the server side, optionally watermark the zoomified image and only then send the requested portion as one picture to the client. Neither the tiles nor the original image are ever loaded by the client. Both server locations - with the original images and tiles - can be .htpasswd or otherwise protected.

Optionally AJAX-ZOOM can crop from the original image without making the tiles. This procedure is however slow and highly memory-consuming. The fastest way however is to load the image tiles directly as described above. From version 2.0.0 on it is also possible with AJAX-ZOOM, see this example.

Integration Example

There are numerous ways of how to integrate AJAX-ZOOM into your HTML. The easiest way to explore the possibilities is checking the examples. There is no "best" integration solution as it depends on how AJAX-ZOOM needs to be displayed, e.g. in a lighbox, how the information about the desired images is passed (see Defining the images) and it depends on your possibilities to edit the sourcefiles of a content management system, blog or online store.

The following example represents only one posible solution:

			<!-- Put the placeholder DIV where ever in the <body> -->
			<div id="test">This id a placeholder DIV</div>
			<script type="text/javascript">
			// Create new object
			var ajaxZoom = {}; 
			
			// Define the path to the axZm folder
			ajaxZoom.path = "/axZm/"; 
			
			// Define your custom parameter query string
			ajaxZoom.parameter = "zoomFile=bedroom_3d.jpg&zoomDir=furniture"; 
			
			// The ID of the element where ajax-zoom has to be inserted into
			ajaxZoom.divID = "test";
			</script>
			
			<!-- Include the loader file -->
			<script type="text/javascript" src="/axZm/jquery.axZm.loader.js"></script>
		

Feature Versions

As we are constantly trying to improve our software, Your wishes, objections and suggestions are greatly appreciated. Please do not hesitate to contact us or leave a comment.

• Optionally load tiles directly. Done, Ver. 2+
• Integration in various ecommerce platforms and CMS, in work. Oxid and Drupal modules are in the pipeline.
• Full iPod / iPhone & co. touchpad events support
• 3D (spin and zoom an object).
• Crossbrowser HTML5 canvas support.
• Support for tif image format.
• Arrows hold event for zoom in and out.
• Slider for zoom in and out.
• Defineable position for image map, also outside of main container.
• Allow more then one instance per page.
• ASP.NET version?
• More skins.

Limitations

• Currently just one istance per page is possible. Still there are various ways to present infinit number of images on a page, e.g. as in this example.
• Does not work cross domain, except in an iframe.
• Opera browser does not support right click on default. It has to be activated in browser settings. Older Opera versions do not support right click at all.
• Does not suitable for intranet. Registered domain name required.

Compatibility

6.0+

2.0+

2.0+

1.0+

9.5+