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.
<!--
* Copy only axZm.iframe.js once into head or body,
* No other files from AJAX-ZOOM are needed on the page / server which includes iframe
* jQuery is not needed
* PHP is not needed -> this page could be HTML
* axZm.iframe.js is only needed if you want AJAX-ZOOM player
* to be able to open at fullscreen on mobile devices from within iframe
* or full browser window on any device when AJAX-ZOOM option "fullScreenApi" is disabled
* allowfullscreen is not needed then
-->
<script type="text/javascript" src="../axZm/axZm.iframe.js"></script>
<!--
* The iframe element can be responsive
* It should have an (unique) ID!
* The value of its ID should be passed as "iframeID" parameter to AJAX-ZOOM
* example33_vario.php is just an example which is prepared to respond to several parameters
* You can create your own file or change the parameters,
* retrieve data from DB within this file or whatever...
* PARAMETERS of example33_vario.php TO DEFINE WHICH DATA TO LOAD
* @ 3dDir - path to folder with 360 degree images, or
* @ zoomData - multiple 2D image paths devided by vertical dash |, or
* @ zoomDir - path to folder with several images for gallery
* SOME OPTIONAL PARAMETERS, AJAX-ZOOM HAS HUNDREDS OTHER
* @ spinReverse - reverse spin direction
* @ spinReverseZ - reverse spin direction for 3D on vertical axis
* @ spinBounce - should be enabled when it is e.g. about 180 degree spin and not full 360 rotation
* @ mouseScrollEnable - disable mouse wheel zoom for desktop devices when not in fullscreen
* @ spinNoInit - do not start spinning on load
* @ fullScreenApi - if 0 or false is passed, the player will not use fullscreen desktop browser API
* @ stepZoom - disable zoom transition when zooming with mouse wheel
* @ example - value of configuration - set defined in /axZm/zoomConfigCustom.inc.php
default "example" value in example33_vario.php is "spinIpad"
in /axZm/zoomConfigCustom.inc.php you can create your own sets
-->
<iframe
class="ajaxzoom_iframe"
width="100%"
frameborder="0"
id="ajaxzoom_frame_1"
src="example33_vario.php?3dDir=/pic/zoom3d/Uvex_Occhiali&fullScreenApi=0&spinReverse=0&mouseScrollEnable=1&spinNoInit=1&iframeID=ajaxzoom_frame_1"
scrolling="no"
allowfullscreen>
</iframe>
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>
Now we only need some JavaScript to replace this image with the iframe when the user clicks on that DIV. It creates an iframe element with jQuery and sets "src" attribute taken from "data-src" of the div. The id of the element is instantly passed over query string as additional parameter. Since "ajaxzoom_image" is a CSS class selector, the below code can be applied to more than one DIV and you only need to insert this JavaScript once.
<script type="text/javascript" src="../axZm/axZm.iframe.js"></script>
<script type="text/javascript">
jQuery("body").on("click", ".ajaxzoom_image", function() {
if ($(this).attr("data-isrc")) {
// generate a unique ID if not present
// other than class the ID of an element should be unique anyway
if (!$(this).attr("id")) {
var min = 11111111111;
var max = 99999999999;
$(this).attr("id", "ajaxzoom_" + new Date().getTime() + Math.floor(Math.random() * (max - min + 1)) + min)
}
// create iframe and put as src the data-src of the div
var iframe = $("<iframe />");
iframe.attr({
width: "100%",
frameborder: "0",
class: "ajaxzoom_iframe",
scrolling: "no",
id: $(this).attr("id"),
allowfullscreen: true,
// set src of the iframe and add iframeID query string parameter instantly
src: $(this).attr("data-isrc") + "&iframeID=" + $(this).attr("id")
});
$(this).replaceWith(iframe);
}
});
</script>
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.
<div class="embed-responsive" style="padding-bottom: 69%;">
<iframe
class="embed-responsive-item lazy"
width="100%"
frameborder="0"
id="ajaxzoom_frame_a1"
data-original="https://www.ajax-zoom.com/examples/example33_vario.php?3dDir=/pic/zoom3d/Speed_Strength_BlackJacket&fullScreenApi=0&spinReverse=1&mouseScrollEnable=0&spinNoInit=1&iframeID=ajaxzoom_frame_a1"
scrolling="no"
allowfullscreen>
</iframe>
</div>
<script type="text/javascript">
$("iframe.lazy").lazyload();
</script>
<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>Proportions can be easily handled with CSS. Bootstrap offers embed-responsive, embed-responsive-item and e.g. embed-responsive-4by3 classes for responsive containers. The problem is that especially portrait type of proportions will most likely exceed the screen height on many devices and layouts.
Since we did not find any stable CSS solution without CSS preprocessing, we have wrote a simple JavaScript extension (jquery.axZm.embedResponsive.js), which handles the proportions dynamically. It can be used with images, 360/3D or galleries, below is an example with portrait type of image.
So the main goal is to provide desired proportions whenever possible in responsive layout but make sure that the size of the player always fully fits inside the screen. Resize the browser window horizontally to see the effect. If you see white background between the image and dotted line around the container, then the proportions are adjusted by the script to fit in view and do not correspond to the intended here 1:1.33
Html for the player inside iframe:
<!-- Parent iframe container for the desired proportions -->
<div class="az_embed-responsive" id="ajaxzoom_frame_6_parent">
<iframe
class="az_embed-responsive-item lazy"
id="ajaxzoom_frame_6"
frameborder="0"
data-original="https://www.ajax-zoom.com/examples/example33_vario.php?zoomData=/pic/zoom/high_res/high_res_003.jpg&mouseScrollEnable=1&fullScreenApi=0&iframeID=ajaxzoom_frame_6"
scrolling="no"
allowfullscreen>
</iframe>
</div>JavaScript for proportions, options are passed over object to jQuery.fn.axZmEmbedResponsive:
<script type="text/javascript">
// Set proportions over JS
$("#ajaxzoom_frame_6_parent")
.axZmEmbedResponsive( {
ratio: "1:1.334521687462864",
heightLimit: 95,
maxWidthArr: [{
maxWidth: 767,
ratio: "1:1.334521687462864",
heightLimit: 80
}]
} );
</script>
You can also define options in data html attributes
<div class="az_embed-responsive" id="ajaxzoom_frame_7_parent" data-ratio="1:1.334521687462864" data-heightLimit="90" data-maxWidthArr="[{"maxWidth": 767, "ratio": "1:1.334521687462864", "heightLimit": 80}]">
<iframe
class="az_embed-responsive-item lazy"
id="ajaxzoom_frame_7"
frameborder="0"
data-original="https://www.ajax-zoom.com/examples/example33_vario.php?zoomData=/pic/zoom/high_res/high_res_004.jpg&mouseScrollEnable=1&fullScreenApi=0&iframeID=ajaxzoom_frame_7"
scrolling="no"
allowfullscreen>
</iframe>
</div>
<script type="text/javascript">
// Set proportions over JS, options are set as data attributes
$("#ajaxzoom_frame_7_parent").axZmEmbedResponsive();
</script>For lazy load you will of course need to initiate it at some point, e.g. on document ready:
jQuery( document ).ready(function($) {
$("iframe.lazy").lazyload();
});Optional but useful amendment to the page where iframes with AJAX-ZOOM content are created is to disable right click when mouse is down for a longer time. This happens when the user pans the image with the right mouse hold down and releases it outside the iframe area. In this case the right mouse click event is triggered on your page. If you do not want to prevent right click in general but for panning only, the following snippet will help:
(function($) {
var clickstarted = 0;
jQuery("body")
.on("mousedown", function(e) {
if (e.which == 2 || e.which == 3 && e.type && e.type.indexOf("mouse") != -1) {
clickstarted = e.timeStamp;
}
})
.on("contextmenu", function(e) {
if (e.timeStamp - clickstarted > 350) {
return false;
}
});
})(jQuery);