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.

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

No Reader comments

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.