previous exampleHomeDownload
next example

AJAX-ZOOM Adaptive Full Screen Lightbox Examples

In this example AJAX-ZOOM is loaded into the maximized lighbox (Fancybox). The sizes of the Fancybox and AJAX-ZOOM player inside are determined by the window size. By changing the browser window size (orientation change on iOS) all sizes are instantly adjusted (try it). In order to call AJAX-ZOOM with Fancybox in such a way we have created a single function (jQuery.openAjaxZoomInFancyBox) which can be found in the head section of this document.

Besides jQuery core library (e.g. http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js) you will need Fancybox JavaScript and AJAX-ZOOM main JavaScript file (/axZm/jquery.axZm.js) to include into the head section of the page. For some methods retrieving the images (CSV) our slightly modified version of Fancybox is required (look for explanation below). The download package contains all necessary files.

The following three methods cause the same result - open a set of images in "fullscreen lightbox". The first one compresses a PHP array with images into a string. This string is then passed as value of "zoomData" parameter to AJAX-ZOOM. As you can see the process requires PHP to be executed in your actual application. The second and third methods do not require PHP - only JavaScript and are very good suitable for frontends generated with other programing languages such as ASP.NET; Specifically for ASP.NET you can run AJAX-ZOOM with "Phalanger".

By the way - this example can serve as tutorial on defining the content to load into AJAX-ZOOM player! There are some other ways of embedding and passing this information to AJAX-ZOOM (see other examples), but the main parameters (zoomData, zoomDir, 3dDir, zoomFile and zoomID) remain unchanged on default. See appendix in the documentation if you need to define your own parameters.

Please note that by passing example=someNumber to AJAX-ZOOM over jQuery.openAjaxZoomInFancyBox() some default settings from "/axZm/zoomConfig.inc.php" are overridden in "/axZm/zoomConfigCustom.inc.php" after elseif ($_GET['example'] == someNumber){ So if changes in "/axZm/zoomConfig.inc.php" have no effect look for the same options "/axZm/zoomConfigCustom.inc.php".

For opening AJAX-ZOOM in a regular lightbox see e.g. example3.php; In example22.php you will find a way to embed AJAX-ZOOM into fluid design. In example21.php AJAX-ZOOM is opened at maximum width and hight of the browser window.

Ver. 4.0.4, 2013-02-17 - This example has been updated! The javascript code for it has been bugfixed and turned into jQuery plugin (jquery.axZm.openAjaxZoomInFancyBox.js). See below! Old way with onclick does still work...
1. Click me: PHP array compressed zoomData

Images are gathered in a PHP array. Afterwards they are compressed to a string. Finally this string will be passed as "zoomData" query string parameter to AJAX-ZOOM.

		// With this function you can compress a PHP array with images to a string
		// This string can then be passed to AJAX-ZOOM as "zoomData" parameter
		// It will be instantly decompressed into PHP array inside AJAX-ZOOM (/axZm/zoomObjects.inc.php)
		function axZmCompress($data){
			return strtr(base64_encode(addslashes(gzcompress(serialize($data),9))), "+/=", "-_,");
		}
		
		// Create empty array
		$zoomData = array();
		
		// Add images to the array
		$zoomData[1]['p'] = '/pic/zoom/boutique/'; // Path to image
		$zoomData[1]['f'] = 'boutique_001.jpg'; // Image filename
	 
		$zoomData[2]['p'] = '/pic/zoom/boutique/'; // Path to image
		$zoomData[2]['f'] = 'boutique_002.jpg'; // Image filename
	
		$zoomData[3]['p'] = '/pic/zoom/boutique/'; // Path to image
		$zoomData[3]['f'] = 'boutique_003.jpg'; // Image filename		
		
		$zoomData[4]['p'] = '/pic/zoom/boutique/'; // Path to image
		$zoomData[4]['f'] = 'boutique_004.jpg'; // Image filename
	
		$zoomData[5]['p'] = '/pic/zoom/boutique/'; // Path to image
		$zoomData[5]['f'] = 'boutique_005.jpg'; // Image filename
	
		$zoomData[6]['p'] = '/pic/zoom/boutique/'; // Path to image
		$zoomData[6]['f'] = 'boutique_006.jpg'; // Image filename
	
		$zoomData[7]['p'] = '/pic/zoom/boutique/'; // Path to image
		$zoomData[7]['f'] = 'boutique_013.jpg'; // Image filename
	
		$zoomData[8]['p'] = '/pic/zoom/boutique/'; // Path to image
		$zoomData[8]['f'] = 'boutique_014.jpg'; // Image filename
		
		$zoomData[9]['p'] = '/pic/zoom/fashion/'; // Path to image
		$zoomData[9]['f'] = 'fashion_002.jpg'; // Image filename
	
		$zoomData[10]['p'] = '/pic/zoom/fashion/'; // Path to image
		$zoomData[10]['f'] = 'fashion_005.jpg'; // Image filename		
				
		// Compress array into string
		$zoomData = axZmCompress($zoomData);
		
		<!-- Simple link with onClick -->
		<a href="javascript:void(0)" onClick="jQuery.openAjaxZoomInFancyBox('example=23&zoomData=<?php echo $zoomData;?>');">1. PHP array compressed zoomData</a>
		

Additionally you can pass "zoomID" parameter. The value of "zoomID" (number of an image in the array) determines which image has to be loaded first. -> Test: open specific file first with zoomID

Instead of "zoomID" you can pass "zoomFile" parameter. The value of "zoomFile" (full path with the image filename) determines which image has to be loaded first. -> Test: open specific file first with zoomFile

2. Click me: CSV - zoomData full paths separated by "|"

Same results as "PHP array compressed zoomData" above can be achieved by simply passing CSV as zoomData parameter - by "|" separated paths to the images. This does not require any PHP code in your actual application. PLEASE NOTE: in order to do this we have slightly modified the latest fancybox Ver. 1.3.4; Please use our modified version, because the standard version will expect an image if it founds .jpg, .png or other image formats in a string and will return a massage saying the image can't be found. The modification enforces ajax request if "zoomData" is found in the string.

		<!-- Simple link with onClick -->
		<a href="javascript:void(0)" onClick="jQuery.openAjaxZoomInFancyBox('example=23&
		zoomData=/pic/zoom/boutique/boutique_001.jpg|/pic/zoom/boutique/boutique_002.jpg|
		/pic/zoom/boutique/boutique_003.jpg|/pic/zoom/boutique/boutique_004.jpg|
		/pic/zoom/boutique/boutique_005.jpg|/pic/zoom/boutique/boutique_006.jpg|
		/pic/zoom/boutique/boutique_013.jpg|/pic/zoom/boutique/boutique_014.jpg|
		/pic/zoom/fashion/fashion_002.jpg|/pic/zoom/fashion/fashion_005.jpg')">2. CSV - zoomData full paths separated  by "|"</a>
		

Additionally you can pass "zoomID" parameter. The value of "zoomID" (number of an image in the array) determines which image has to be loaded first. -> Test: open specific file first with zoomID

Instead of "zoomID" you can pass "zoomFile" parameter. The value of "zoomFile" (full path with the image filename) determines which image has to be loaded first. -> Test: open specific file first with zoomFile

2a. Binding with $('selector').openAjaxZoomInFancyBox(options);

		jQuery("#exampleLink2").openAjaxZoomInFancyBox({
			axZmPath: "../axZm/",
			queryString: "example=23&zoomID=2&zoomData=/pic/zoom/boutique/boutique_001.jpg|
			/pic/zoom/boutique/boutique_002.jpg|/pic/zoom/boutique/boutique_003.jpg|
			/pic/zoom/boutique/boutique_004.jpg|/pic/zoom/boutique/boutique_005.jpg|
			/pic/zoom/boutique/boutique_006.jpg|/pic/zoom/boutique/boutique_013.jpg|
			/pic/zoom/boutique/boutique_014.jpg|/pic/zoom/fashion/fashion_002.jpg|
			/pic/zoom/fashion/fashion_005.jpg",
			fullScreenApi: false,
			boxMargin: 30,
			boxPadding: 10,
			boxShowCloseButton: true,			
			 
			ajaxZoomCallbacks: {
				/*
				onLoad: function (){
					alert ("This is test alert call");
				},
				onImageChange: function(info){
					console.log(info);
				}
				*/
			}
		});
		
3. Click me: $zoom['config']['pic'] as prefix

$zoom['config']['pic'] in /axZm/zoomConfig.inc.php can be used as prefix to all paths passed to AJAX-ZOOM. If you need to point to the image located in "/pic/zoom/boutique/boutique_004.jpg" and $zoom['config']['pic'] is "/pic/zoom/" the path can be just "boutique/boutique_004.jpg". No matter what is defined in $zoom['config']['pic'] you can pass the full path too, e.g "/pic/zoom/boutique/boutique_004.jpg" will work as well. PLEASE NOTE: in order to do this we have slightly modified the latest fancybox Ver. 1.3.4; Please use our modified version, because the standard version will expect an image if it founds .jpg, .png or other image formats in a string and will return a massage saying the image can't be found. The modification enforces ajax request if 'zoomData' is found in the string.

		<!-- Simple link with onClick -->
		<a href="javascript:void(0)" onClick="jQuery.openAjaxZoomInFancyBox('example=23&zoomData=
		fashion/fashion_1.jpg&zoomData=boutique/boutique_001.jpg|boutique/boutique_002.jpg|
		boutique/boutique_003.jpg|boutique/boutique_004.jpg|boutique/boutique_005.jpg|
		boutique/boutique_006.jpg|boutique/boutique_013.jpg|boutique/boutique_014.jpg|
		fashion/fashion_002.jpg|fashion/fashion_005.jpg');">3. $zoom['config']['pic'] as prefix</a>
		

Additionally you can pass "zoomID" parameter. The value of "zoomID" (number of an image in the array) determines which image has to be loaded first. -> Test: open specific file first with zoomID

Instead of "zoomID" you can pass "zoomFile" parameter. The value of "zoomFile" (full path with the image filename) determines which image has to be loaded first. -> Test: open specific file first with zoomFile

4. Click me: zoomDir - load entire directory with images

You can load entire directory with images by passing zoomDir parameter e.g. "/pic/zoom/animals"; As in method 3 above - provided, that $zoom['config']['pic'] is set to e.g. "/pic/" the value of zoomDir parameter can be just "zoom/animals" or if $zoom['config']['pic'] is set to "/pic/zoom/", the value of zoomDir can be "animals".

		<!-- Simple link with onClick -->
		<a href="javascript:void(0)" onClick="jQuery.openAjaxZoomInFancyBox('example=23&zoomDir=/pic/zoom/animals');">4. zoomDir - load entire directory with images</a>
		

Additionally you can pass "zoomID" parameter. The value of "zoomID" (number of an image in the array) determines which image has to be loaded first. -> Test: open specific file first with zoomID

Instead of "zoomID" you can pass "zoomFile" parameter. The value of "zoomFile" (full path with the image filename) determines which image has to be loaded first. -> Test: open specific file first with zoomFile

5. Click me: 3dDir - 360 / 3D animations

Load 360/3D animations by passing the parameter 3dDir - path to the directory with images.

Please Note: the only difference between regular 360 spin and 3D (multirow) is that original images are placed in subfolders of the target folder. E.g. the path passed to the folder is "/pic/zoom3d/Uvex_Occhiali" images of each row are placed in subfolders, e.g. /pic/zoom3d/Uvex_Occhiali/row_1, /pic/zoom3d/Uvex_Occhiali/row_2, /pic/zoom3d/Uvex_Occhiali/row_3; You do not need to define these subfolders anywhere. AJAX-ZOOM will instantly detect them and procede all the images in them.

		<!-- Simple link with onClick -->
		<a href="javascript:void(0)" class="exampleLink" onClick="jQuery.openAjaxZoomInFancyBox('example=17&3dDir=/pic/zoom3d/Uvex_Occhiali');">5. 3dDir - 360 / 3D animations</a>
		

Additionally you can pass "zoomID" parameter. The value of "zoomID" (number of an image in the array) determines which image has to be loaded first. -> Test: open specific file first with zoomID

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