This example shows how to open AJAX-ZOOM in a modal window by a click event within an iframe.
An iframe is an inline frame to embed another page within the current HTML document.
This another page in this example is /examples/example33_vario.php.
This page accepts specific arguments that you can pass to it over query string to load the desired content.
It then interprets and forwards these arguments to the AJAX-ZOOM viewer, which opens responsively at full-page.
Depending on the OS, browser, and the arguments, the viewer can break out of the iframe and display at full-screen.
There are several other examples, which use that example33_vario.php file to load framed AJAX-ZOOM content as well.
Please note that because of AJAX-ZOOM license, the iframe source should be the same origin. However, if you have legit reasons for cross-domain or cross-origin implementation, please contact AJAX-ZOOM support with this issue to find a solution for your specific use case.
Below, there are sections with three main argument types that you can pass to the AJAX-ZOOM viewer:
There are some issues that you should consider when implementing AJAX-ZOOM via iframe into modal windows. First is that not all modal scripts support iframes. So if you are looking for a modal box script, pay attention to this detail at first. Also, make sure that you either remove the scrollbars from the iframe by an option of that JavaScript plugin or remove the scrollbars via CSS. Otherwise, it might look ugly.
The buttons below open AJAX-ZOOM in the first generation "Fancybox" (with the second in does work too), "Colorbox", and via AJAX-ZOOM extension, which makes the “Fancybox” behave responsively even with the framed content in it.
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>
