example26.php HOME Examples overview Download Ask a question / privacy policy / imprint
example28.php

AJAX-ZOOM responsive fullscreen lightbox (modal window Fancybox) examples

In this example, AJAX-ZOOM loads into responsive lightbox / modal window. This lightbox is the slightly modified first-generation Fancybox script (MIT). Instead of loading source images, the script loads AJAX-ZOOM viewer with deep zoom and optional thumbnails gallery. The modifications to the first-generation Fancybox core JavaScript, however, do not affect the default functionality!

For invoking AJAX-ZOOM with Fancybox in such a way, we have created a wrapper extension. You can find it in /axZm /extensions /jquery.axZm.openAjaxZoomInFancyBox.js. This separate $.openAjaxZoomInFancyBox plugin triggers and manages the AJAX-ZOOM viewer inside the Fancybox. It also makes the first generation Fancybox responsive, and it works even with Fancybox 2 core JavaScript without any changes in its core.

The responsive Fancybox extension in other examples

We use $.axZm.openAjaxZoomInFancyBox.js extension also in other extensions and examples. If it is about a different extension, mostly there is an option such as openMode where you can set the responsive Fancybox as the opening method for AJAX-ZOOM. In some examples such as example32, by default settings, responsive Fancybox does not apply on mobile devices. Instead, AJAX-ZOOM opens at fullscreen mode.

Tutorial on parameters to define content in AJAX-ZOOM viewer

Besides the responsive modal Fancybox window, this example can also serve as a tutorial about defining the content that you want to load into AJAX-ZOOM viewer! It lists by example all possible query string parameters (zoomData, zoomDir, 3dDir, zoomFile and zoomID). These are the parameters AJAX-ZOOM supports out of the box to define flat images and paths for the 360-viewer. The example also explains how you can compress the parameter values. Compressing helps to hide direct image paths from exposing them to the public and shorten the length of the query string.

Besides jQuery core library, you need to include the Fancybox JavaScript / CSS files, AJAX-ZOOM core JavaScript && CSS files and the $.axZm.openAjaxZoomInFancyBox extension into the HTML of your page or template.

Defining images over zoomData parameter and separate image paths with '|'

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

You can achieve the same results as "PHP array compressed zoomData" below by passing zoomData parameter as CSV. The separation sting between image paths of the CSV values is a vertical bar "|" character. Creating a CSV string does not require any PHP code in your actual application.

PLEASE NOTE: in order to pass image paths as CSV string, we needed to modify Fancybox generation one. Please use our modified version because the original version expects an image file and if it finds .jpg, .png or other image formats in a string, Fancybox I returns a massage saying that the image path is wrong. Our modification just enforces AJAX request if zoomData parameter is within the query string. There are no problems with it for Fancybox 2. You can use it without any modifications.


				<!-- Simple link with onclick -->
				<a href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({axZmPath: '../axZm/', queryString: '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 the zoomID parameter. The value of zoomID is the number of an image starting from one. It determines the image number that you want to load as first.
Test: open the specific file as the first image by passing zoomID parameter

Instead of zoomID, you can pass the zoomFile parameter. The value of zoomFile is the full path with the filename that determines the image you want to load as first too.
Test: open the specific file as the first image by passing the zoomFile parameter

1a. Binding with $('selector').openAjaxZoomInFancyBox();


				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);
					}
					*/
					}
				});
			

Defining images over zoomData parameter as a string, serialized and compressed from PHP array

2. Click me: PHP array compressed zoomData

Images are gathered in a PHP array. After that, the array is serialized to a string and compressed. Finally, you can pass this string as a zoomData query string parameter to AJAX-ZOOM. AJAX-ZOOM automatically decompresses this string, converts it to PHP array and proceeds with displaying the images.


				// With this function you can compress a PHP array with images to a string
				// This string can then be passed to AJAX-ZOOM as <code>zoomData</code> parameter
				// It will be instantly decompressed into PHP array inside AJAX-ZOOM
				function axZmCompress($data){
					return strtr(base64_encode(addslashes(gzcompress(serialize($data),9))), "+/=", "-_,");
				}

				// Create empty array
				$zoomData = array();

				// Add images to the array
				$zoomData[1] = '/pic/zoom/boutique/boutique_001.jpg';
				$zoomData[2] = '/pic/zoom/boutique/boutique_002.jpg';
				$zoomData[3] = '/pic/zoom/boutique/boutique_003.jpg';
				$zoomData[4] = '/pic/zoom/boutique/boutique_004.jpg';
				$zoomData[5] = '/pic/zoom/boutique/boutique_005.jpg';
				$zoomData[6] = '/pic/zoom/boutique/boutique_006.jpg';
				$zoomData[7] = '/pic/zoom/boutique/boutique_013.jpg';
				$zoomData[8] = '/pic/zoom/boutique/boutique_014.jpg';
				$zoomData[9] = '/pic/zoom/fashion/fashion_002.jpg';
				$zoomData[10] = '/pic/zoom/fashion/fashion_005.jpg';

				// Compress array into string
				$zoomData = axZmCompress($zoomData);
			

				<!-- Simple link with onclick -->
				<a href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({axZmPath: '../axZm/', queryString: 'example=23&zoomData=<?php echo $zoomData;?>'});">
					1. PHP array compressed zoomData
				</a>
			

Additionally, you can pass the zoomID parameter. The value of zoomID (the number of an image in the array) determines which image has to load first. ->
Test: open the 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 load first. ->
Test: open the specific file first with zoomFile

There is no need to define full absolute paths in zoomData parameter

3. Click me: $zoom['config']['pic'] as prefix

You can use $zoom['config']['pic'] option from /axZm/zoomConfig.inc.php as prefix to all paths, which you pass to AJAX-ZOOM. For example, if you need to point to the image located in /pic/zoom/boutique/boutique_004.jpg and $zoom['config']['pic'] is set to /pic/zoom/, the path can be just boutique/boutique_004.jpg". No matter what is defined in $zoom['config']['pic'], you can also pass full paths too e.g /pic/zoom/boutique/boutique_004.jpg will work as well.

PLEASE NOTE: in order to pass image paths as CSV string, we needed to modify Fancybox generation one. Please use our modified version because the original version expects an image file and if it finds .jpg, .png or other image formats in a string, Fancybox I returns a massage saying that the image path is wrong. Our modification just enforces AJAX request if zoomData parameter is within the query string. There are no problems with it for Fancybox 2. You can use it without any modifications.

				<!-- Simple link with onclick -->
				<a href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({axZmPath: '../axZm/', queryString: '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 the zoomID parameter. The value of zoomID (number of an image in the array) determines which image has to load first.
Test: open the specific file first with zoomID

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

Load entire directory with images by passing zoomDir parameter

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 only animals.


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

Additionally, you can pass the zoomID parameter. The value of zoomID (number of an image in the array) determines the image that you want to load as first.
Test: open the specific file first with zoomID

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

Load 360/3D with "3dDir" parameter

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 for 3D, source images are placed in subfolders of the target folder and not directly in the folder you are pointing at. E.g., the path you pass is /pic/zoom3d/Uvex_Occhiali. 360 view mages 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 proceed all images in them.


				<!-- Simple link with onclick -->
				<a href="javascript:void(0)" class="btn btn-info btn-block" onclick="jQuery.openAjaxZoomInFancyBox({axZmPath: '../axZm/', queryString: 'example=17&3dDir=/pic/zoom3d/Uvex_Occhiali'});">
					5. 3dDir - 360 / 3D animations
				</a>
			

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

Load anything above in responsive Fancybox as IFRAME

IFRAME gallery

				<a class="btn btn-info btn-block" onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?zoomData=/pic/zoom/estate/house_01.jpg|/pic/zoom/animals/animals_001.jpg|/pic/zoom/furniture/furniture_002.jpg', iframe: true})" href="javascript:void(0)">IFRAME gallery</a>
			
IFRAME 360

				<a class="btn btn-info btn-block" onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?3dDir=/pic/zoom3d/Uvex_Occhiali', iframe: true})" href="javascript:void(0)">IFRAME 360</a>
			

$.openAjaxZoomInFancyBox documentation

$.openAjaxZoomInFancyBox(options) - if options is an object you can define all the options below. If, however, you do not care about the options, then options parameter can be a string representing the queryString option below.

OptionDefaultDescription
axZmPath 'auto' Path to /axZm directory, e.g. /test/axZm/
queryString null Single string which determines which images will be loaded 1
loadingMsg 'Loading, please wait...' Wait message
axZmCallBacks {} AJAX-ZOOM has several callbacks, https://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart
fullScreenApi false Try to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers except IE < 10 and mobile
iframeMode false Enable iframe mode
iframe false Alias iframeMode
scrolling 'no' Scroll iframe
href null Alias queryString for iframes
boxMargin 30 Margin of the box to the edge of the browser window
boxPadding 10 Box padding
boxCenterOnScroll true Put box in view when browser window scrolls while box is showing
boxOverlayShow true Show fancybox overlay
boxOverlayOpacity 0.75 Opacity of the overlay
boxOverlayColor '#777' Color of the overlay
boxTransitionIn 'fade' 'elastic', 'fade' or 'none'
boxTransitionOut 'fade' 'elastic', 'fade' or 'none'
boxSpeedIn 300 Transition speed when box appears
boxSpeedOut 300 Transition speed when box disappears
boxEasingIn 'swing' Easing function
boxEasingOut 'swing' Easing function
boxShowCloseButton true Show close button
boxEnableEscapeButton true Close box when the user hits Esc button
boxOnClosed function(){} Callback when the box is closed
boxOnComplete function(){} Callback when the box is opened
1 Please note that by passing example=someNumber to AJAX-ZOOM over "queryString" 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".

Comments (0)

Leave a Comment

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.
Load other examples in slider