previous exampleHomeDownload
next example

AJAX-ZOOM - no toolbar, image map outside, zoom slider enabled, custom navi using api functions

Loading, please wait...
Free HTML layout, e.g image galery, add to cart button...

General: sometimes designers have the need for very simple image zoom feature with extended styling possibilities. Above is an example of AJAX-ZOOM with only basic features enabled.

Loading in a lightbox: if you want to show this content in a lightbox, e.g. as an iframe the $zoomData array (see below) needs to be defined in the page from where the lightbox is inited. For demonstration this page has been prepared to strip all unneeded html.

Click here to load this page in a lightbox.

Toolbar: in this example the "native" toolbar is completly disabled. Instead there is a custom div container with some icons in it. Each icon has an onclick event with api function like jQuery.fn.axZm.zoomIn() or jQuery.fn.axZm.zoomOut(). After AJAX-ZOOM is loaded this div container is appended to and positioned inside AJAX-ZOOM with the help of the "onLoad" callback.

Image map: unlike in most other examples the image map is positioned outside of AJAX-ZOOM player. This can be done with the option "mapParent" in /axZm/zoomConfig.inc.php or zoomConfigCustom.inc.php; "mapParent" defines the ID of an block element e.g. a DIV on the page. The size of the map is controlled by the option "mapFract".

PHP part - define the images:

			<?php
			// Create an array with images
			$zoomData[1]['p'] = '/pic/zoom/fashion/';
			$zoomData[1]['f'] = 'test_fashion1.png';
			
			$zoomData[2]['p'] = '/pic/zoom/fashion/';
			$zoomData[2]['f'] = 'test_fashion3.png';
		
			$zoomData[3]['p'] = '/pic/zoom/fashion/';
			$zoomData[3]['f'] = 'test_fashion2.png';
		
			$zoomData[4]['p'] = '/pic/zoom/fashion/';
			$zoomData[4]['f'] = 'test_fashion4.png';
			
			// Turn PHP array into string
			$_GET['zoomData'] = strtr(base64_encode(addslashes(gzcompress(serialize($zoomData),9))), '+/=', '-_,');
			?>
		

Javascript part:

			<script type="text/javascript">
			// Create new object
			var ajaxZoom = {};
			
			// Callback functions
			ajaxZoom.opt = {
				onLoad: function(){
					// Hilight one of the thumbs
					jQuery("#thumb_"+jQuery.axZm.zoomID).css("borderColor", "blue");
					
					// Append custom toolbar to AJAX-ZOOM
					jQuery("#naviReplacement").appendTo("#zoomLayer").css({
						display: "block",
						left: 10,
						bottom: 10,
						zIndex: 111
					});
				},
				onImageChange: function(info){
					// Hilight selected thumb
					jQuery(".outerContainer").css("borderColor", "black");
					jQuery("#thumb_"+info.zoomID).css("borderColor", "blue");
				}
			};
			
			// Path to axZm folder
			ajaxZoom.path = "../axZm/";
			
			// Define your custom parameter query string
			// By example=18 some settings are overridden in zoomConfigCustom.inc.php
			// zoomData is the php array with images turned into string
			ajaxZoom.parameter = "zoomData=<?php echo $_GET["zoomData"]?>&example=18&zoomID=1"; 
			
			 // 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>
		

Modules & Plugins Ecommerce

Magento 360 spin & zoom See AJAX-ZOOM in action on Magento
Integration quide
XT:commerce 360 spin & zoom See AJAX-ZOOM in action on xt:Commerce (xtcModified, Gambio, VEYTON 4)
Integration quide
Oxid product zoom See AJAX-ZOOM in action on Oxid eSales
Integration quide
hybris zoom 360 spin See AJAX-ZOOM in action on hybris multichannel commerce (no php)
  More coming soon...
6.0+ 2.0+ 2.0+ 1.0+ 9.5+ 2.0+ 4.0+ Pinch zoom, tap zoom,
swipe

Comments (0)

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.
MORE EXAMPLES
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom