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 HTML, we simply define the onclick attribute inline.
But you can and normally should use something like jQuery(selector).on('click', function(){...}) in your implementations.
In the below HTML, we simply define the onclick attribute inline.
But you can and normally should use something like jQuery(selector).on('click', function(){...}) in your implementations.
In the below HTML, we simply define the onclick attribute inline.
But you can and normally should use something like jQuery(selector).on('click', function(){...}) in your implementations.
More APP Container examples at this page.
| Option | Default | Description |
|---|---|---|
| outerClass | '' | Additional CSS class(es) added to the outer "axZmAppContainerOverlay" for easy overriding the internal "axZmApp*" CSS classes.
To override the default values, use this option to easy to override the styles, for example:
|
| modalMode | true | If enabled, the script adds the value of the "modalClass" option to the element with the CSS class .axZmAppContainerBox.
That makes this box with the content inside look like a modal/lightbox.
By default @media directives in the CSS file, the modal turns to full-page overlay if the width of the screen is less than 1024px or height is less than 600px.
Use the "outerClass" option if you want to override those rules.
|
| modalClass | 'axZmAppContainerModal' | CSS class added for the modal functionality.
That is when the "modalMode" option is enabled.
The .axZmAppContainerModal CSS Class is limited in size, which is best visible on larger screens.
To have the modal window almost filling the browser's window but still look like a large responsive modal window, use the "axZmAppContainerWindow" for the value of this option.
If you want something different, you can add your rules and the corresponding name of your custom class for this option.
|
| modalBorderRadius | null | If you don't want to mess with CSS rules, you can enable rounded corners by defining a value for this option. The value should be a string, for example, "6px" or "0 0 6px 6px" if you want to differenciate. |
| modalPadding | null | If you don't want to mess with CSS rules, you can enable a padding of the modal conainer by defining a value for this option. The value should be a string, for example, "5px" or "5px 10px" if you want to differenciate. |
| fadeIn | true | Enable fade-in effect of the background overlay. The content window is not fading. This overlay is not visible if the "modalMode" is not activated or when it defaults to full window overlay on small screens. The opacity is achieved by adding the |
| fadeOut | true | Enable fade-out effect of the background overlay.
The opacity is achieved by adding the If you want to change the duration of this effect, change the CSS |
| flyIn | false | Enable a fly-out effect of the container box with the actual content.
It is similar to that of Bootstrap's modal.
The Enabling or disabling this option affects the moment at which the "onShow" callback function triggers.
If the "flyIn" option is enabled, the "onShow" callback triggers after the transition, defined as the |
| flyOut | true | Enable a fly-out effect of the container box with the actual content.
It is similar to that of Bootstrap's modal.
The .axZmAppContainerFlyOutPrepare and .axZmAppContainerFlyOut CSS classes are responsible for the fly-out effect.
|
| escape | true | Enable closing the APP container with the escape button. |
| contentHtml | '' | Reference to an HTML snippet, a jQuery selector that finds the HTML snippet (template), or a valid HTML as a string. |
| contentOverflowTopHtml | null | Reference to an HTML snippet, a jQuery selector that finds the HTML snippet, or a valid HTML as a string to place at the top of the content. It is placed in a separate container at the very TOP of the content window in a separate container. The height of this separate container is 0. Its content can overflow not only the parent container but also the content. You could use it to position, for example, a closing button that is wholly or partly outside of the modal window. |
| contentOverflowBottomHtml | null | Reference to an HTML snippet, a jQuery selector that finds the HTML snippet, or a valid HTML as a string to place at the top of the content. It is placed in a separate container at the very BOTTOM of the content window in a separate container. The height of this separate container is 0. Its content can overflow not only the parent container but also the content. You could use it to position, for example, a title container that is wholly outside of the modal window. |
| parent | 'body' | APP's container parent selector. The APP container is appended to this element. |
| centerOffset | true | When scrollbar is hidden, center the modal box within the layout as if the bar is still there. |
| onBuild | null | A function that is executed after the APP container with contents from "contentHtml", "contentOverflowTopHtml", and "contentOverflowBottomHtml" is build and is available in the DOM. If you define your custom "contentHtml", you can trigger AJAX-ZOOM or its extension manually in this callback function. |
| onShow | null | A function that is executed after the APP container with contents from "contentHtml", "contentOverflowTopHtml", and "contentOverflowBottomHtml" is build and is available in the DOM. If you define your custom "contentHtml", you can trigger AJAX-ZOOM or its extension manually in this callback function. If you have enabled the "flyIn" option, this onShow function triggers after the fly-in effect finishes. |
| onHide | null | A function that is executed just before the APP container is removed. |
| onRemove | null | A function that is executed after the APP container is removed. |
|
The above options are all you need to view AJAX-ZOOM or AJAX-ZOOM extension within a customized HTML layout. If you don't need a customized HTML layout ("contentHtml" is not set) and would like to simply show the core AJAX-ZOOM viewer in it, you can do so with the below options. With the below options, you also don't have to trigger AJAX-ZOOM manually in the "onShow" callback; AJAX-ZOOM initializes automatically! The minimal required options are only "axZmPath" and "queryString". By values of them, you define the location of AJAX-ZOOM core scripts (the "axZmPath" option), and with which settings and content to load the AJAX-ZOOM viewer (the "queryString" option). If you load AJAX-ZOOM via an iframe, you only need to define the "iframe" option. |
||
| axZmPath | '' | Path to the axZm folder, for example, "/ajaxzoom/axZm/". You must set this path to trigger AJAX-ZOOM automatically. |
| queryString | '' | AJAX-ZOOM query string, e.g., example=11&zoomDir=/pic/zoom/animals to load all images as gallery from that folder.
Or example=17&zoomData=/path/to/image1.jpg|/path/to/image2.jpg to load selected images as gallery from different locations.
Or example=spinIpad&3dDir=/pic/zoom3d/Uvex_Occhiali to show a 360-view with images from that path.
The example parameter defines an AJAX-ZOOM core options' set.
Read more about the example parameter on
this page.
|
| iframe | '' | The scr for an iframe.
The "queryString" is not needed.-
This option's value should alreafy contain it.
|
| defaultTemplate | 1 | There are two default templates, which are referenced by numbers - 1, 2, 3 or 4. All templates have a header with the close button. The template number one is best for 360 or 3D views. The template number two is best for image galleries. The second template also shows the number of the image viewed out of the sum of all images. |
| padding | '' | Padding of the container with CSS class axZmAppContainerMain when "defaultTemplate" option is used.
You can use it as, e.g., 10px, or like this 5px 10px 5px 10px.
The value mast be a string and not an integer.
|
| closeButtonPosition | null | If a template from the "defaultTemplate" option is applied, the close button in the header is positioned on the right side. With this option, you can set the button to be positioned differently. You can position it at the left side or let the script automatically choose the position depending on the user's platform: for macOS, the position of the close button is left, and for all others, the position is right. Possible values are: null, "left", "right", "auto". |
| playerContainerID | '' | Only required if you define a custom template via "contentHtml" option. Otherwise, a default template applies automatically, and it generates a unique ID for the viewer automatically. |
| zoomID | '' | First ID (number) of the image that should be loaded in the gallery. The indexation starts from 1. If you have 6 images and want to load the sixth image first, you can set this option's value to 6. |
| zoomFile | '' | As an alternative to the "zoomID" option, you can define the image to load first by its file name, e.g. image123.jpg |
| title | '' | An optional title of the box.
The HTML template should contain an element with the axZmAppContainerTitle CSS class used as an identifier only.
The default templates do contain such an element.
|
| axText | {} | Dummy option that will be implemented in future versions. |
| ajaxZoomCallbacks | {} | JavaScript object containing optional AJAX-ZOOM callbacks. Those are your custom functions triggered at certain events, e.g., when image changes in the gallery. You can read more about the AJAX-ZOOM callbacks at this page. |
| fullScreenApi | true | Use the browser's fullscreen API if possible. Currently, on mobile touch devices, this setting is ignored by AJAX-ZOOM's internal codes. It may be reconsidered in later versions, or there will be an additional option to differentiate. |
| postMode | false | Use POST instead of GET when communicating with the AJAX-ZOOM ajax controller. You may need to enable this option if the string in the "queryString" option gets longer than the limit of what your server is ready to receive as a query string. |
| tmpImg | '' | Dummy option that will be implemented in future versions. |
| Extension version: 1.1.0, last updated: 2021-05-24 | ||
Please see example27.
Please see jacklmoore.com.
