previous exampleHome
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);
		
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