previous exampleHomeDownload
next example

AJAX-ZOOM - Open the viewer in fullscreen

- Switch folder with AJAX (can be any other custom parameter(s))

Gallery thumbs are created on the fly and are cached in /pic/cach folder using $axZm->rawThumb method. Clicking on a thumb the jQuery.fn.axZm.openFullScreen javascript method is called which opens the selected thumb on the entire available inner window size.

The original sourcecode (PHP) of this example is in the download package.

Head PHP:

			if(!session_id()){session_start();}
			unset ($_SESSION['imageZoom']);
			$_SESSION['imageZoom']=array();
			
			$_GET['example'] = 2;
			
			if (!isset($_GET['zoomDir'])){
				$_GET['zoomDir'] = 'animals';
			}else if(isset($_GET['zoomDir']) AND !isset($_GET['previewPic'])){
				$getDir=1;
			}
			
			require ('../axZm/zoomInc.inc.php');
			
			/**
			  * @param array $pic_list_array Array with images
			  * @param array $zoom Configuration array
			  * @return onject $axZmH Class instance
			  **/
			 
			function zoomThumbs($pic_list_array, $zoom, $axZmH){
				$return = '';
				foreach ($pic_list_array as $k=>$v){
					$return .= "<DIV class='thumbDemoBack'>";
						$return .= "<DIV class=\"thumbDemo\" style='background-image:url(".$_SERVER['PHP_SELF'].'?zoomDir='.$_GET['zoomDir'].'&example='.$_GET['example'].'&previewPic='.$v.");'>";
						$return .= "<a class=\"thumbDemoLink\" onClick=\"jQuery.fn.axZm.openFullScreen('/axZm/', 'zoomID=".$k."&zoomDir=".$_GET['zoomDir']."&example=".$_GET['example']."', 'window', true);\" href=\"javascript: void(0)\"><img src='".$zoom['config']['icon']."empty.gif' class='thumbDemoImg' border='0'></a>";
						$return .= "</DIV>";
					$return .= "</DIV>";
				}			
				return $return;
			}
			
			// On the fly generation of thumbs
			if (isset($_GET['previewPic'])){
				ob_start();
				$path = $zoom['config']['picDir'];
			
				$w = 100;
				$h = 100;
				$fillThumb = false;
				
				$ww = $w;
				$hh = $h;
				
				if ($fillThumb){
					$ratio = 1;
					$imgSize = getimagesize($path.urldecode($_GET['previewPic']));
					if ($imgSize[0] > $imgSize[1]){
						$ratio = $imgSize[0] / $imgSize[1];
					} elseif ($imgSize[1] > $imgSize[0]){
						$ratio = $imgSize[1] / $imgSize[0];
					}
					$ww = $ww * $ratio;
					$hh = $hh * $ratio;
				}
				
				if ($axZmH->isValidPath($path)){
					$axZm->rawThumb($zoom, $path, urldecode($_GET['previewPic']), round($ww), round($hh), 90, true);
				}
				ob_end_flush();
				exit;
			}
			
			// Return the thumbs list
			if ($getDir){
				echo zoomThumbs($pic_list_array, $zoom, $axZmH);
				exit;
			}
		

Head CSS:

			<link rel="stylesheet" href="../axZm/axZm.css" type="text/css" media="screen">
			.thumbDemoBack {
				float: left; 
				width: 142px; 
				height: 139px; 
				margin-bottom: 5px; 
				margin-right: 7px;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: url(/axZm/icons/thumb_back.png);
				overflow: hidden;
			}
			.thumbDemo {
				width: 100px; 
				height: 100px; 
				margin-left: 21px;
				margin-top: 20px;
				background-position: center center;
				background-repeat: no-repeat;
			}
			.thumbDemoImg {
				width: 100px;
				height: 100px;
			}
			.thumbDemoLink{
			
			}
		

Head Javascript:

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
	
		<script type="text/javascript">
			function changeDir(dir){
				jQuery.ajax({
					url: '<?php echo $_SERVER['PHP_SELF'];?>',
					data: 'zoomDir='+dir,
					cache: false,
					success: function (data){
						jQuery('#galDiv').html(data);
					}
				});		
			}
		</script>
		

Body PHP:

			// Select list with folders to choose from
			echo "<select onChange=\"changeDir(this.value)\">";
			foreach ($zoomTmp['folderArray'] as $k=>$v){
				echo "<option value='$k'";
				if (isset($_GET['zoomDir'])){
					if ($_GET['zoomDir']== $k) OR $_GET['zoomDir']== $v){
						echo ' selected';
					}
				}
				echo ">$v</option>";
			}
			echo "</select> - Switch folder with AJAX (can be any other custom parameter(s))";
			
			// Reeturn thumbs
			echo zoomThumbs($pic_list_array, $zoom, $axZmH);
		

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