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.
$.openAjaxZoomInFancyBoxplugin 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.
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.
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.
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
Please notice that jQuery.fn.axZm(); needs to be triggered in onComplete callbacks (when AJAX request is finished)