Press on the buttons below to open various AJAX-ZOOM configurations as iframed content in a lightbox:
This example demonstrates how to display AJAX-ZOOM gallery which grabs and shows all images from a particular folder, loads specified images from different folders or 360°/3D with some "lightboxes" (please click on the buttons above). The content of the iframe in the lightboxes is simply the file of the first example (example1.php) and for the "responsive Fancybox" - example33_vario.php.
Due to AJAX-ZOOM license issues the iFrame source should be from the same domain as source domain. If you have legit reasons for crossdomain use, please contact AJAX-ZOOM support.
Please note that not all lightboxes on internet support iframed content. If you are going to use a different lightbox make sure to remove the scrollbars from the iframe.
<!-- 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> <!-- 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> <!-- AJAX-ZOOM extension to load AJAX-ZOOM into maximized fancybox, requires jquery.fancybox-1.3.4.css and jquery.fancybox-1.3.4.js, optional --> <script type="text/javascript" src="../axZm/extensions/jquery.axZm.openAjaxZoomInFancyBox.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>
In the below code we simply write the onclick attribute inline.
Of course you can use jQuery(selector).bind('click', function(){...}) in your applications.
<!-- Fancybox -->
<a href="javascript:void(0)" onclick="jQuery.fancybox({href: 'example1.php?zoomDir=estate&example=1&iframe=1', type: 'iframe', autoScale: false, width: 754, height: 458, scrolling: 'no'})">Fancybox</a>
<!-- Colorbox -->
<a href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example1.php?zoomDir=estate&example=1&iframe=1', iframe: true, width: 804, height: 528, scrolling: false})">Colorbox</a>
<!-- Responsive Fancybox -->
<a href="javascript:void(0)" onclick="$.openAjaxZoomInFancyBox({href: 'example33_vario.php?zoomDir=estate', iframe: true})">Responsive Fancybox</a>
<!-- Fancybox -->
<a href="javascript:void(0)" onclick="jQuery.fancybox({href: 'example1.php?zoomData=/pic/zoom/estate/house_01.jpg|/pic/zoom/animals/animals_001.jpg|/pic/zoom/furniture/furniture_002.jpg&example=1&iframe=1', type: 'iframe', autoScale: false, width: 754, height: 458, scrolling: 'no'})">Fancybox</a><br>
<!-- Colorbox -->
<a href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example1.php?zoomData=/pic/zoom/estate/house_01.jpg|/pic/zoom/animals/animals_001.jpg|/pic/zoom/furniture/furniture_002.jpg&example=1&iframe=1', iframe: true, width: 804, height: 528, scrolling: false})">Colorbox</a><br>
<!-- Responsive Fancybox -->
<a href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?zoomData=/pic/zoom/estate/house_01.jpg|/pic/zoom/animals/animals_001.jpg|/pic/zoom/furniture/furniture_002.jpg', iframe: true})">Responsive Fancybox</a>
<!-- Fancybox -->
<a class="lnkBtn" href="javascript:void(0)" onclick="jQuery.fancybox({href: 'example1.php?3dDir=/pic/zoom3d/Uvex_Occhiali&example=17&iframe=1', type: 'iframe', autoScale: false, width: 602, height: 475, scrolling: 'no'})">Fancybox 360</a><br>
<!-- Colorbox -->
<a class="lnkBtn" href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example1.php?3dDir=/pic/zoom3d/Uvex_Occhiali&example=17&iframe=1', iframe: true, width: 644, height: 550, scrolling: false})">Colorbox 360</a><br>
<!-- Responsive Fancybox -->
<a class="lnkBtn" href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?3dDir=/pic/zoom3d/Uvex_Occhiali', iframe: true})">Responsive Fancybox 360</a>