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.
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.
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.
zoomData parameter and separate image paths with '|' 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);
}
*/
}
});
zoomData parameter as a string, serialized and compressed from PHP arrayImages 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
zoomData parameterYou 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.
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
zoomDir parameterYou 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 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
<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>
<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(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.
