There are several reasons why you would want to embed AJAX-ZOOM into an iframe. In fact this is the easiest way to embed AJAX-ZOOM as you do not need the jQuery core in the parent page and you do not need any other scripts too. One of the immanent reasons is that because of simple API usage and programming you can not have more than one instances of AJAX-ZOOM showing simultaneously at a time within one page. You can however switch between several instances like in example29.php.
If your iframe is responsive and AJAX-ZOOM is triggered fullscreen inside this iframe, then it will adjust instantly when iframe is resized. Additionally you can place more than one player into a page. Mouse wheel zoom on player is disabled in this examples when the player is not in fullscreen view but it can be enabled if needed. Please note that "cross-domain" usage is not supported by the regular license.
New: if you include "/axZm/axZm.iframe.js" into parent page (e.g. like this page with iframes) and pass iframe ID to the player over query string, then fullscreen will also work for mobile devices.
Not triggered with browser API fullscreen and does work on mobile devices including IOS without opening new window or something like that.
Here we have a DIV element which contains an image as placeholder. The DIV has a class "ajaxzoom_image" which can be changed if you wish. It only sets the desired proportion which can be achieved with various CSS methods or JS. The "data-src" attribute contains the link to a file including parameters and sets the desired content you want to load into AJAX-ZOOM player. This can be a 360/3D, plain image or gallery...
<div class="ajaxzoom_image" data-src="https://www.ajax-zoom.com/examples/example33_vario.php?3dDir=/pic/zoom3d/Canon_1100D&mouseScrollEnable=1&fullScreenApi=0"> <img src="../axZm/icons/media-360-1200.png"> </div>
Here we use bootstrap "embed-responsive" class for the outer DIV and "embed-responsive-item" bootstrap class for the iframe item. "embed-responsive" is nice when you want to set exact proportions of the div by defining the padding-bottom as the percentage value. Other than one would expect the percentage is calculated out of width of the element... Additionally the class "lazy" to identify the iframes which should be lazy loaded. Note that same as with images the src attribute is not defined. Instead the lazy load plugin uses "data-original" html5 attribute and sets the "src" when the user scrolls the iframe in view.
<iframe class="ajaxzoom_iframe" width="100%" frameborder="0" id="ajaxzoom_frame_2" src="https://www.ajax-zoom.com/examples/example33_vario.php?zoomDir=trasportation&zoomFile=transportation_007.jpg&mouseScrollEnable=1&iframeID=ajaxzoom_frame_2" scrolling="no" allowfullscreen> </iframe>
<iframe class="ajaxzoom_iframe lazy" width="100%" frameborder="0" id="ajaxzoom_frame_3" data-original="https://www.ajax-zoom.com/examples/example33_vario.php?3dDir=/pic/zoom3d/Ecco&spinReverse=1&mouseScrollEnable=1&spinNoInit=1&iframeID=ajaxzoom_frame_3" scrolling="no" allowfullscreen> </iframe>
<iframe class="ajaxzoom_iframe lazy" width="100%" frameborder="0" id="ajaxzoom_frame_5" data-original="example33_vario.php?zoomData=/pic/zoom/furniture/furniture_006.jpg&mouseScrollEnable=1&iframeID=ajaxzoom_frame_5" scrolling="no" allowfullscreen> </iframe>