previous exampleHomeDownload
next example

Ajax Zoom Lightbox & Co.
examples with Ajax content

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=animals&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

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