example2.phpExamples overviewDownloadAsk a question
example4.php

AJAX-ZOOM "Lightbox"
examples with AJAX content

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"

Load specified images with "zoomData"

Fancybox

Example 6
Example 7

Colorbox

Example 6
Example 7

Responsive Fancybox

See example27.php

Load 360 / 3D images with "3dDir"

Fancybox

360 Example
3D Example

Colorbox

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

About

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

JavaScript & CSS files in Head

<!-- jQuery core, needed for the lightboxes! -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.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 finisched)

// Bind Colorbox to all elements with class ajaxExampleColorbox
jQuery(document).ready(function() {
	jQuery(".ajaxExampleColorbox").colorbox({
		initialWidth: 300,
		initialHeight: 300,
		scrolling: false,
		scrollbars: false,
		preloading: false,
		opacity: 0.95,
		// this option has been added by ajax-zoom to enforce loading href as url and not image
		ajax: true, 
		onClosed: function(){
			jQuery.fn.axZm.spinStop();
		},
		onComplete: function(){
			// Trigger AJAX-ZOOM after loading
			jQuery.fn.axZm(); 
		}
	});

	// Bind Fancybox to all elements with class ajaxExampleFancybox
	jQuery(".ajaxExampleFancybox").fancybox({
		padding: 0,
		overlayShow: true,
		overlayOpacity: 0.9,
		zoomSpeedIn: 0,
		zoomSpeedOut: 100,
		easingIn: "swing",
		easingOut: "swing",
		hideOnContentClick: false,
		centerOnScroll: false,
		onComplete : function(){
			jQuery.fn.axZm(); // Important callback after loading
		},
		onClosed : function(){
			jQuery.fn.axZm.spinStop();
		},
		// fancybox ver.2.x options in case fancybox 2.x is used
		type: "ajax", // 
		afterLoad: function(a){ //
			// Need to trigger delayed
			setTimeout(function(){jQuery.fn.axZm();}, 1)
		},
		beforeClose: function(){
			jQuery.fn.axZm.spinStop();
		}
	});	
});	
			

Example links

For variations please see the source of this file... As you can see the only difference is the class of the elment because we bind either fancybox or colorbox to all elemets with a certain class. In your scripts you can use onclick attribute on bind click event e.g. like this $(selector).fancybox(same code)

// Fancybox
<a class="ajaxExampleFancybox" href="../axZm/zoomLoad.php?zoomLoadAjax=1&example=4&zoomData=/pic/zoom/animals/animals_011.jpg|/pic/zoom/animals/animals_012.jpg|/pic/zoom/animals/animals_015.jpg">Example 6</a><br>

// Colorbox
<a class="ajaxExampleColorbox" href="../axZm/zoomLoad.php?zoomLoadAjax=1&example=4&zoomData=/pic/zoom/animals/animals_011.jpg|/pic/zoom/animals/animals_012.jpg|/pic/zoom/animals/animals_015.jpg">Example 6</a><br>
				

Comments (0)

Leave a Comment

Name (required):
Email (required):
Website:
Your comment (no html):
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.