There are several reasons why you would want to integrate AJAX-ZOOM with an iframe.
First is that this is the easiest way to embed AJAX-ZOOM in general. You even do not need the jQuery core in the parent page, and you do not need any other scripts also.
One of the immanent reasons is that because of simple API usage and programming you usually cannot have more than one instances of AJAX-ZOOM that show simultaneously at a time within one page. However, that does not apply for iframes. You can place as many instances as you want that way. Please note, however, that AJAX-ZOOM has many examples where you can switch between several 360-views and images using one instance of the viewer!
If your iframe is responsive and AJAX-ZOOM triggers responsively inside this iframe, the viewer instantly resizes when the iframe does. Using "lazyload" to postpone loading of the content inside the iframe is possible and the example demonstrates how to implement it.
In this example, at none fullscreen state, the mouse wheel zoom is mostly disabled. That makes a long page scrollable on a desktop browser. Since this is an option, you can enable mouse wheel zoom or enable zooming with the mouse exclusively, when a specific keyboard button is pressed.
Please note that the regular license does not support "cross-domain" usage.
New: if you include /axZm/axZm.iframe.js into the parent page
(this page with iframes does) and pass the iframe ID to the player over query string, the fullscreen mode will also work on mobile devices.
It will not work on mobile if this file is missing.
However, generally, there is almost no difference in performance and handling between integration of AJAX-ZOOM inline and integration over an iframe.
An example, where the fullscreen view does not trigger by the browsers fullscreen API. That works on mobile devices including IOS without opening a new window.
The source of the iframe here is another AJAX-ZOOM example
(/examples/example33_vario.php).
It is a file configured to receive, interpret and forward the query string arguments to the AJAX-ZOOM viewer.
You can, however, create your interpreter or place any other AJAX-ZOOM example into the frame.
<!--
* 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 THE 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, a DIV element contains an image as a placeholder.
The DIV has a CSS class ajaxzoom_image.
You can change this class or image.
It does not matter much.
It only sets the desired proportion of the container, and you can achieve this with several CSS methods or by using JavaScript.
The data-src attribute contains the link to a file and includes the query string parameters.
The 3dDir parameter defines the source of your folder with images from a 360-spin view.
With a different parameter, you can load a plain image or many images with or without the thumbnails 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, when a user clicks on that DIV, it only needs some JavaScript to replace the image with the iframe.
The script creates an iframe element using jQuery
and sets the src attribute taken from data-src of that DIV element.
It also adds the id of the element automatically to the query string as the additional parameter.
Since ajaxzoom_image is a CSS class,
you can apply the below code to more than one view, 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>
The above iframe uses the embed-responsive and embed-responsive-item classes. These classes are part of the bootstrap CSS library, but you can easily extract them if you are not using bootstrap on your page.
By defining the padding-bottom as the percentage value, you can precisely set the proportions of a container even if it does not make any sense.
The trick is that other than one would expect, when padding-bottom is a percentage value, browsers calculate the height of that element based on its width.
Accordingly, when the width increases, the height increases proportionally to the percentage value of the bottom padding.
It is easy to apply and lets you set the desired proportions responsively.
(Unfortunately, the embed-responsive CSS-only solution has some drawbacks.
Read about a possible JavaScript $.axZmEmbedResponsive circumvention below on this page.)
Additionally, the inner container, which is the iftame here, gets the lazy css class.
It serves as the identifier for the "lazyload" JavaScript.
Note that same it is with images the src attribute is not defined.
Instead, the "lazyload" plugin expects to find the data-original html5 attribute.
It sets the src attribute of the frame only when the user scrolls the page to the position where that iframe is visible.
<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> $.axZm.embedResponsive.js.
Single high-resolution image example loaded from ajax-zoom.com and lazy load enabled.
You can easily handle proportions with CSS only.
Bootstrap offers embed-responsive, embed-responsive-item and,
e.g. embed-responsive-4by3 classes for responsive elements that always need to have certain proportions.
The problem is that especially the portrait type of proportions likely exceed the screen height on many devices and within fancy layouts.
Since we did not find any stable CSS solution without CSS preprocessing,
we have written a simple JavaScript jquery.axZm.embedResponsive.js extension that handles the proportions dynamically.
It observes the height of the browser window, the height of the container
and adjusts the container's height if the container does not fit entirely into the viewport of the browser window.
You can use it for plain images, 360/3D views or galleries. Below is an example with portrait type of the image.
To summarize, the primary goal here is to provide the desired proportions whenever possible in responsive layouts but make sure that the size of the player always entirely 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 proportion of 1:1.33 in here.
HTML for the 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>jQuery.fn.axZmEmbedResponsive JavaScript for proportions handling.
<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 HTML5 data 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>Of course, for lazy loading, you need to initiate the script at some point, e.g., on document ready:
jQuery( document ).ready(function($) {
$("iframe.lazy").lazyload();
});An optional but helpful supplement to the page with AJAX-ZOOM content is to disable right click when the mouse is down for a longer time. That happens when the user pans the image with the right mouse hold down and releases it outside of the frame area. In this case, the right mouse click event usually triggers at the parent page. If you do not want to prevent right click entirely, but for panning only, the following snippet helps:
(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);