previous exampleHomeDownload
next example

AJAX-ZOOM - embedded implementation, load images from multiple directories

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.

Additionally the vertical gallery is placed to the left and has four image thumbs in a row - everything adjustable with the options. Also there is an "auto zoom effect" applied to the first image (can be changed to all).

In this example images are collected from a couple of folders.

Head PHP:

			if(!session_id()){session_start();}
			unset ($_SESSION['imageZoom']);
			$_SESSION['imageZoom']=array();
			
			// Simulate dynamic configuration
			$_GET['example'] = 15;
			
			$docRoot = $_SERVER['DOCUMENT_ROOT'];
			if (substr($docRoot,-1) == '/'){$docRoot = substr($docRoot,0,-1);}
			$m=0; $zoomData = array();
			
			// Open some dirs
			foreach (glob($docRoot.'/pic/zoom/'.'*', GLOB_ONLYDIR) as $folder){
				// Constrain by selected folders
				$selectedFolders = array('boutique', 'furniture', 'objects');
				if (basename($folder) != '..' && basename($folder) != '.' && in_array(basename($folder),$selectedFolders)){
					// Read files
					$handle = opendir($folder);
					while (false !== ($file = readdir($handle))){ 
						if (basename($file) != '..' && basename($file) != '.' && substr(basename($file),-3) == 'jpg'){
							$m++;
							// Fill $zoomData with some values
							$zoomData[$m]['p']=basename($folder);
	
							$zoomData[$m]['f']=basename($file);
						}
					}
					closedir($handle);
				}
			}
			
			// Compress PHP array into a string and pass it as $_GET parameter
			$_GET['zoomData'] = strtr(base64_encode(addslashes(gzcompress(serialize($zoomData),9))), '+/=', '-_,');
			
			
			$docRoot = $_SERVER['DOCUMENT_ROOT'];
			if (substr($docRoot,-1) == '/'){$docRoot = substr($docRoot,0,-1);}
			require ($docRoot.'/axZm/zoomInc.inc.php');
			
		

Body PHP:

			echo $axZmH->drawZoomBox($zoom, $zoomTmp);
			echo $axZmH->drawZoomJsConf($zoom, $rn = false, $pack = true);
			echo $axZmH->drawZoomJsLoad($zoom, $pack = true, $windowLoad = true);
		

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