example1.php HOME Examples overview Download Ask a question / privacy policy / imprint
example3.php

AJAX-ZOOM "Lightbox" iFrame examples

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:

  • With the zoomDir parameter, the viewer loads a set of images and displays it as a gallery.
  • With the zoomData parameter, the viewer loads one or more images from different locations that you specify in the value. You must separate the image paths with a | character.
  • With the 3dDir parameter, the viewer loads a 360-product spin or 3D product view.
If you want to know more about the arguments that you can pass to the AJAX-ZOOM viewer, we recommend studying the example27, which turned out to be a tutorial on this.

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.

If you would like to see other AJAX-ZOOM examples that are dealing with the implementation of the viewer via iframes, please inspect example6_cms, example13, example27.

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.

Load all images from a directory with "zoomDir"

The new AJAX-ZOOM APP container

Link gallery 1 Link gallery 2 Link gallery 2

Colorbox - not responsive

Link gallery 1 Link gallery 2 Link gallery 3

Responsive Fancybox

Example 1 Example 2 Example 3

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.

HTML AJAX-ZOOM APP container

HTML Colorbox

HTML Fancybox

Load specified images with "zoomData"

The new AJAX-ZOOM APP container

Link gallery 1

Colorbox - not responsive

Link gallery 1

Responsive Fancybox

Link gallery 1

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.

HTML AJAX-ZOOM APP container

HTML Colorbox

HTML Fancybox

Load 360 / 3D images with "3dDir"

The new AJAX-ZOOM "APP container"

360 example

Colorbox - not responsive

360 example

Responsive Fancybox

360 example

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.

HTML AJAX-ZOOM APP container

HTML Colorbox

HTML Fancybox

$.axZmAppContainer - documentation (options)

More APP Container examples at this page.

OptionDefaultDescription
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:

.axZmAppContainerOverlay.yourCustomClass .axZmAppContainerBox {
    max-width: 1900px;
    max-height: 900px;
}
            
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 .axZmAppContainerFadeIn CSS class to the background element with the class .axZmAppContainerBack. To change the color, change the CSS background-color for .axZmAppContainerBack. By default, it is black. To change the final opacity after fading, change the opacity for .axZmAppContainerBack.axZmAppContainerFadeIn.

fadeOut true

Enable fade-out effect of the background overlay. The opacity is achieved by adding the .axZmAppContainerFadeOut CSS class to the background element with the class .axZmAppContainerBack.

If you want to change the duration of this effect, change the CSS transition for .axZmAppContainerBack.axZmAppContainerFadeOut. Match that transition time with the value of this option. It should be an integer representing milliseconds. Boolean true defaults to 150 (ms).

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 .axZmAppContainerFlyInPrepare and .axZmAppContainerFlyIn CSS classes are responsible for the fly-out effect.

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 transition-duration in the axZmAppContainerFlyInPrepare CSS class, ends. This default delay is 400 milliseconds, but you can use the "onBuild" callback function that triggers before the transition ends.

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

$.openAjaxZoomInFancyBox - documentation (options)

Please see example27.

$.colorbox (legacy) - documentation (options)

Please see jacklmoore.com.

Comments (0)

Leave a Comment

Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, your personal image will be attached every time you comment.
Load other examples in slider