example2.php HOME Examples overview Download Ask a question / privacy policy / imprint
example4.php

AJAX-ZOOM "Lightbox", examples with AJAX content

This example demonstrates how you can open AJAX-ZOOM player in a lightbox / modal window from a link (click event) as AJAX invoked content. As such, it does not work in cross-origin (cross-domain) environment.

The AJAX-ZOOM content can be a 360-degree product spin, 3D product view, a gallery or one flat image with deep zoom. The examples below use first generation "Fancybox" (works with second too) and "Colorbox" to illustrate the procedure. However, you can also adjust other modal window JavaScript plugins to work with AJAX-ZOOM.

If you would like to adapt AJAX-ZOOM to load within an alternative modal box that you already use and would like to keep it, the code that initiates the "colorbox" in this example will give you some insight into that.

Load all images from a folder with the "zoomDir" parameter

The new AJAX-ZOOM APP container

Example 1 Example 2 Example 3 Example 4 Example 5

Colorbox - not responsive

Example 1 Example 2 Example 3 Example 4 Example 5

Responsive Fancybox

Example 1 Example 2 Example 3 Example 4 Example 5

HTML AJAX-ZOOM APP container

HTML Colorbox

HTML Fancybox

Load specified images with "zoomData"

The new AJAX-ZOOM APP container

Example 6 Example 7

Colorbox - not responsive

Example 6 Example 7

Responsive Fancybox

Example 6 Example 7

HTML AJAX-ZOOM APP container

HTML Colorbox

HTML Fancybox

Load 360 / 3D images with "3dDir"

The new AJAX-ZOOM APP container

360 Example 3D Example

Colorbox - not responsive

360 Example 3D Example

Responsive Fancybox

360 Example 3D Example

HTML AJAX-ZOOM APP container

HTML Colorbox

HTML Fancybox

HTML + JavaScript

APP container

Example HTML for the APP container

Example JavaScript for the APP container

Colorbox

Example HTML for the Colorbox

Example JavaScript for the Colorbox

Fancybox

Example HTML for the Fancybox

Example JavaScript for the Fancybox

Plugin/extension documentations

$.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