Load all images from a directory with zoomDir

Fancybox
Example 1
Example 2
Example 3
Example 4
Example 5

Colorbox
Example 1
Example 2
Example 3
Example 4
Example 5

Load specified images with zoomData

Fancybox
Example 6
Example 7

Colorbox
Example 6
Example 7

Load 360 / 3D images with 3dDir

Fancybox
360 Example
3D Example

Colorbox
360 Example
3D Example

Load specified images with zoomData and play with descriptions

Fancybox

Colorbox
Example 8
Example 9

This example demonstrates how to open multiple zoom galleries with some lightbox clones (please click on the links above). The content is loaded via Ajax requests. This solution does not work "cross domain".

Please note, that not all lightbox clones fully suport ajax content.

When you have jpg or png in href of the link, which is the case when using zoomData and passing image paths directly without any encoding, most lightboxes consider it as a direct link to the image file and do not trigger the request to the url via ajax. The here used and in the download package included lightboxes (Fancybox & Colorbox) have been slightly modified to load the url and not "mistakenly" consider it to be an image...

Head Fancybox:

			<link rel="stylesheet" href="../axZm/axZm.css" media="screen" type="text/css">
			<link rel="stylesheet" href="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.2.6.css" media="screen" type="text/css">
			
			<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" src="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.2.6.js"></script>
		

Head Javascript:

			<script type="text/javascript">
			jQuery(document).ready(function() {
				// For more information take a look at the options of fancybox: http://fancybox.net/api
				jQuery(".ajaxExampleFancybox").fancybox({
					padding				: 0,
					overlayShow			: true,
					overlayOpacity		: 0.6,
					zoomSpeedIn			: 0,
					zoomSpeedOut		: 100,
					easingIn			: "swing",
					easingOut			: "swing",
					hideOnContentClick	: false, // Important
					centerOnScroll		: false,
					imageScale			: true,
					autoDimensions		: true,
					callbackOnShow		: function(){
						jQuery.fn.axZm(); // Important callback after loading
					},
					// Newer fancybox has different callback names
					onComplete : function(){
						jQuery.fn.axZm(); // Important callback after loading
					}

				});					
			});
		

Body:

			<!-- zoomLoadAjax=1 is needed for ajax request, zoomDir=4&example=4 or whatever a your custom parameters -->
			<a class="ajaxExampleFancybox" href="/axZm/zoomLoad.php?zoomLoadAjax=1&zoomDir=/pic/zoom/animals&example=4">Example 1</a>
			
			<!-- Please note that the provided lightboxes have been modified in order not to load the href string as image because the string contains .png or .jpg -->
			<a class="ajaxExampleFancybox" href="/axZm/zoomLoad.php?zoomLoadAjax=1&zoomData=/pic/zoom/animals/test_animals1.png|/pic/zoom/boutique/test_boutique3.png&example=4">Example 2</a>
		

Alternative Body:

			<!-- You can also compress the zoomData string like this: -->
			<?php
			// Create an array with images
			$zoomData = array();
			
			$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 = strtr(base64_encode(addslashes(gzcompress(serialize($zoomData),9))), '+/=', '-_,');
			?>
			
			<!-- Then output $zoomData into html -->
			<a class="ajaxExampleFancybox" href="/axZm/zoomLoad.php?zoomLoadAjax=1&zoomData=<?php echo $zoomData;?>&example=4">Example 3</a>

		

Modules & Plugins Ecommerce

	See AJAX-ZOOM in action on Magento Integration quide
	See AJAX-ZOOM in action on xt:Commerce (xtcModified, Gambio, VEYTON 4) Integration quide
	See AJAX-ZOOM in action on Oxid eSales Integration quide
	See AJAX-ZOOM in action on hybris multichannel commerce (no php)
	More coming soon...