JavaScript

Ajax-Zoom Review

Sam Deering
Share

Ajax-Zoom

If you want to showcase high resolution images on your website then you can never go wrong with Ajax-Zoom. This jQuery plugin, Ajax-Zoom does NOT require any browser plugins such as Flash, Java or Silverlight perfect for E-Commerce, extended product presentations and other applications.

View Demos

What is Ajax-Zoom?

Ajax-Zoom is a very powerful image zoom and pan plugin with 360° rotate option. It has image gallery option based on jQuery and PHP and can be smoothly integrated into any of your website since it also has over 300 other options! Completely packaged and free / low cost jQuery zoom solution to present high resolution images on the web.

Special Features:

Ajax-Zoom has full screen capability, various image protection options, dynamic watermarking / annotating. No plugins like Flash, Java or Silverlight required which sometimes can be a pain. It supports JPG, TIF, PNG, BMP, GIF und PSD image types. Stepless zoom, pan and crop interface with mousewheel support (zoom to point). iPhone / iPad support. And you know what’s interesting? It is branding free that Ajax loader and the background can be replaced with your own images!

Fullscreen mode
Ajax-Zoom FullScreen

It’s cool that it uses HotSpots plugin for AJAX-ZOOM 3D/360/2D player because what it does is that we can now create multiple hotpots or rectangle image areas and setup several click / mouseover actions for them (e.g. links, tooltips, popup lightboxes).

Code example 1:
The only difference between any other AJAX-ZOOM implementation or example is that the JavaScript file with JSON data produced by this editor is loaded in AJAX-ZOOM onLoad callback with jQuery.fn.axZm.loadHotspotsFromJsFile API, see below…






	

		
		
Loading, please wait...

	






// Create empty object
var ajaxZoom = {}; 

// Define callbacks, for complete list check the docs
ajaxZoom.opt = {
	onBeforeStart: function(){
		// Set backgrounf color, can also be done in css file
		jQuery(".zoomContainer").css({backgroundColor: "#FFFFFF"});		
	},
	onLoad: function(){
		// Some settings can be set inline
		jQuery.axZm.spinReverse = false;
		
		// Load hotspots over this function... 
		// or just define jQuery.axZm.hotspots here and trigger jQuery.fn.axZm.initHotspots(); 
		jQuery.fn.axZm.loadHotspotsFromJsFile("../pic/hotspotJS/eos_1100D.js", false, function(){
			// Do something if you want				
		});
	}
};

// Define the path to the axZm folder, adjust the path if needed!
ajaxZoom.path = "../axZm/"; 

// Define your custom parameter query string
// example=spinIpad has many presets for 360 images
// You can change them in /axZm/zoomConfig.inc.php after elseif ($_GET['example'] == 'spinIpad')
// 3dDir - best absolute path to the folder with 360/3D images
// for 2D you can use zoomData, e.g. zoomData=/your/path/image1.jpg|/your/otherPath/image2.jpg
ajaxZoom.parameter = "example=spinIpad&3dDir=/pic/zoom3d/Uvex_Occhiali"; 

// The ID of the element where ajax-zoom has to be inserted into
ajaxZoom.divID = "abc";

Code example 2:
This example does not require PHP codes and could be also inserted with an WYSIWYG editor into any content. All you have to do is to define ajaxZoom.parameter string with paths to the source images. 



Loading, please wait...



// Create new object
var ajaxZoom = {}; 

// Define the path to the axZm folder
ajaxZoom.path = "../axZm/"; 

// Define your custom parameter query string
ajaxZoom.parameter = "example=2&zoomData=/pic/zoom/furniture/test_furniture1.png|/pic/zoom/furniture/test_furniture2.png|/pic/zoom/boutique/test_boutique1.png|/pic/zoom/boutique/test_boutique2.png"; 

// The ID of the element where ajax-zoom has to be inserted into
ajaxZoom.divID = "test";

How to get it:

The good thing is that you can always download and test Ajax-Zoom and if you have a good feel about it already and would have certain features enabled – You can buy it.

Check out the demos

Contact support for further inquiries.