previous exampleHomeDownload
next example

AJAX-ZOOM Lightbox & Co. Examples - Simple gallery

- Fancybox - Colorbox
- Switch folder with AJAX (can be any other custom parameter(s))
- Switch folder with query string, with page reloaded

In this example we "misuse" the inline gallery thumbnails from AJAX-ZOOM for a simple html gallery.

To keep things not to complicated - following is a simplified version of the actual code. In order to change the thubnails over a dropdown or any other kind of menu with AJAX there is an additional javascript function and logic necessary. For complete solution please take a look at the original sourcecode (PHP) of this example!

Head PHP:

			if(!session_id()){session_start();}
			unset ($_SESSION['imageZoom']);
			$_SESSION['imageZoom']=array();
			$noObjectsInclude = true;
			
			$_GET["example"] = 2;
			$_GET["zoomDir"] = 'trasportation';
			
			require ('../axZm/zoomInc.inc.php');
	
			/**
			  * This function returns 
			  * @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(".$axZmH->composeFileName($zoom['config']['gallery'].$v,$zoom['config']['galleryFullPicDim'],'_').");'>";
						$return .= "<a class='thumbDemoLink' href=\"/axZm/zoomLoad.php?zoomLoadAjax=1&zoomID=".$k."&zoomDir=".$_GET['zoomDir']."&example=".$_GET['example']."\"><img src='".$zoom['config']['icon']."empty.gif' class='thumbDemoImg' border='0'></a>";
						$return .= "</DIV>";
					$return .= "</DIV>";
				}			
				return $return;
			}
		

Head CSS:

			.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">
			function setFancyBox(){
				jQuery(".thumbDemoLink").unbind().fancybox({
				padding				: 0,
				overlayShow			: true,
				overlayOpacity		: 0.6,
				zoomSpeedIn			: 0,
				zoomSpeedOut		: 100,
				easingIn			: 'swing',
				easingOut			: 'swing',
				hideOnContentClick	: false, // important
				centerOnScroll		: true,
				imageScale			: true,
				autoDimensions		: 'true',
				callbackOnShow		: function(){
					jQuery.fn.axZm();
					// Needs this var only for demo with changing dirs...
					jQuery.zoomLightbox =  'fancybox';
				}
				});
			}
			
			jQuery(document).ready(function() {
				setFancyBox();
			});
		</script>
		

Body PHP:

			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
javascript picture zoom