example2.php HOME Examples overview Download Ask a question / privacy policy / imprint
example4.php

AJAX-ZOOM "Lightbox", examples with AJAX content

This example demonstrates how you can open AJAX-ZOOM player in a lightbox / modal window from a link (click event) as AJAX invoked content. As such, it does not work in cross-origin (cross-domain) environment.

The AJAX-ZOOM content can be a 360-degree product spin, 3D product view, a gallery or one flat image with deep zoom. The examples below use first generation "Fancybox" (works with second too) and "Colorbox" to illustrate the procedure. However, you can also adjust other modal window JavaScript plugins to work with AJAX-ZOOM. If you are planning it, please read the below information.

Nowadays, when the web design has to be adaptive and responsive, it better to initiate a modal window, set a preloader animation and load AJAX-ZOOM into the primary content container of the window responsively via the AJAX-ZOOM API. We did exactly that by writing a wrapper $.openAjaxZoomInFancyBox plugin for Fancybox script. You can view the result in example27. If you want a responsive copy & paste solution with Fancybox modal window, please proceed to example27.

Before proceeding, few words about what is AJAX content? In short, that means requesting data from a server via JavaScript, getting a return and do something with this return via the callback of that JavaScript function, which initiates the request. AJAX is a technology and AJAX-ZOOM has it as part of its name. Accordingly, when talking about AJAX in general, this is not equal to AJAX-ZOOM software product. The JavaScript modal window plugins, taken below as an example, put the returned content of an AJAX path into the modal window, which they create. Of course, there are plenty of other scripts and use cases, where AJAX technology is generally applied.

So when dealing with third-party JavaScript modal window plugins, the first step is to provide a link for the modal window script to AJAX-ZOOM, which returns HTML and other data. The second step is to initiate the AJAX-ZOOM viewer via $.fn.axZm API method when the modal window appends the retrieved HTML to the window area.

There are a couple of problems that may arise with third-party scripts and AJAX content.

First is that a modal window script must have an option for defining a callback JavaScript function, which it executes after it gets and appends the retrieved AJAX content. AJAX-ZOOM needs that callback to be initialized by jQuery.fn.axZm API method.

The second problem is that a modal window script may not have an option to explicitly define that the provided path is AJAX content and not, e.g., an image. Instead, a script may inspect the path vie regex such as .jpg|.png|.gif and when found a match in the string, automatically decide that this is not about AJAX content but an image. This misperception leads to an error, and it is the reason why we needed to modify the first generation Fancybox script not to decide automatically when it is about AJAX-ZOOM content. The second generation of Fancybox does not have this problem.

Load all images from a directory with "zoomDir"

Fancybox - not responsive

Example 1 Example 2 Example 3 Example 4 Example 5

Colorbox - not responsive

Example 1 Example 2 Example 3 Example 4 Example 5

Responsive Fancybox

See example27.php

Load specified images with "zoomData"

Fancybox - not responsive

Example 6 Example 7

Colorbox - not responsive

Example 6 Example 7

Responsive Fancybox

See example27.php

Load 360 / 3D images with "3dDir"

Fancybox - not responsive

360 Example 3D Example

Colorbox - not responsive

360 Example 3D Example

Responsive Fancybox

See example27.php

Load specified images with zoomData and play with descriptions

For this type of descriptions, some additional JS code is passed over AJAX-ZOOM callbacks. The code creates an empty div element in the onLoad AJAX-ZOOM callback and appends it after the player. Title and descriptions are defined in a separate JS object for each image and appended to the created div element over "onImageChange" AJAX-ZOOM callback which is triggered whenever the image changes. All the AJAX-ZOOM callbacks are passed to AJAX-ZOOM when it is initialized with jQuery.fn.axZm(); you can find the code with comments in the source of this file. It is right after the below buttons.

For custom description handling see also example25.php

Fancybox

Todo

Colorbox

Example 8 Example 9

Responsive Fancybox

Todo

JavaScript & CSS files in Head


<!-- jQuery core, needed for the lightboxes. Include if not already present. -->
<script src="../axZm/plugins/jquery-1.8.3.min.js"></script>

<!-- AJAX-ZOOM core, needed! -->
<link href="../axZm/axZm.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

<!--  Fancybox lightbox javascript, only needed if used, please note: it has been slightly modified for AJAX-ZOOM -->
<link rel="stylesheet" href="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.css" media="screen" type="text/css">
<script type="text/javascript" src="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<!-- Colorbox plugin, only needed if used -->
<link rel="stylesheet" href="../axZm/plugins/demo/colorbox/example1/colorbox.css" media="screen" type="text/css">
<script type="text/javascript" src="../axZm/plugins/demo/colorbox/jquery.colorbox-min.js"></script>
						

JavaScript: bind either colorbox and/or fancybox to elements with certain classes

Please notice that jQuery.fn.axZm(); needs to be triggered in onComplete callbacks (when AJAX request is finished)

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