example2.php HOME Examples overview Download Ask a question
example4.php

AJAX-ZOOM "Lightbox", examples with AJAX content

This example demonstrates how to open multiple zoom galleries with some lightbox clones (please click on the links above). The content is loaded via Ajax requests. This solution does not work "cross domain". Please also note, that not all lightbox clones fully support ajax content.

When you have jpg or png in href of the link, which is the case when using zoomData and passing image paths directly without any encoding, most lightboxes consider it as a direct link to the image file and do not trigger the request to the url via ajax. The here used and in the download package included lightboxes (Fancybox & Colorbox) have been slightly modified to load the url and not "mistakenly" consider it to be an image...

Press on the buttons below to open various AJAX-ZOOM configurations in a lightbox as AJAX loaded content:

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 will find the code commented in the source of this file right after the buttons below.

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.