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 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.
Press on the buttons below to open various AJAX-ZOOM configurations as iframed content in a lightbox:
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 - not responsive -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.fancybox({href: 'example33_vario.php?zoomDir=estate&example=1&mNavi_enabled=0', type: 'iframe', autoScale: false, width: 754, height: 458, scrolling: 'no'})">Link gallery 1</a>
<!-- Colorbox - not responsive -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example33_vario.php?zoomDir=estate&example=1&mNavi_enabled=0', iframe: true, width: 804, height: 528, scrolling: false})">Link gallery 1</a>
<!-- Responsive Fancybox -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?zoomDir=estate&example=1&mNavi_enabled=0', iframe: true})">Example 1</a>
<!-- Fancybox - not responsive -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.fancybox({href: 'example33_vario.php?zoomData=/pic/zoom/estate/house_01.jpg|/pic/zoom/animals/animals_001.jpg|/pic/zoom/furniture/furniture_002.jpg&example=1&mNavi_enabled=0', type: 'iframe', autoScale: false, width: 754, height: 458, scrolling: 'no'})">Link gallery 1</a>
<!-- Colorbox - not responsive -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example33_vario.php?zoomData=/pic/zoom/estate/house_01.jpg|/pic/zoom/animals/animals_001.jpg|/pic/zoom/furniture/furniture_002.jpg&example=1&mNavi_enabled=0', iframe: true, width: 804, height: 528, scrolling: false})">Link gallery 1</a>
<!-- Responsive Fancybox -->
<a class="btn btn-info btn-block" 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})">Link gallery 1</a>
<!-- Fancybox - not responsive -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.fancybox({href: \example33_vario.php?3dDir=/pic/zoom3d/Uvex_Occhiali&example=17&mNavi_enabled=0', type: 'iframe', autoScale: false, width: 602, height: 475, scrolling: 'no'})">360 example</a>
<!-- Colorbox - not responsive -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example33_vario.php?3dDir=/pic/zoom3d/Uvex_Occhiali&example=17&mNavi_enabled=0', iframe: true, width: 644, height: 550, scrolling: false})">360 example</a>
<!-- Responsive Fancybox -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?3dDir=/pic/zoom3d/Uvex_Occhiali', iframe: true})">360 example</a>