Press on the buttons below to open various AJAX-ZOOM configurations in a lightbox as AJAX loaded content:
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
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...
<!-- 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>
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();
}
});
});
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>