example32_ecom.php HOME Examples overview Download Ask a question / privacy policy / imprint
example33.php

AJAX-ZOOM mouseover gallery extension placed inside an APP container that shows up as a modal box or full-page overlay.

The new that justifies this additional example is that you can now precisely set which item in the gallery should load first. That is required when you want the user to immediately face the same illustration indicated by the element that triggers AJAX-ZOOM. It can be a 360-view, a regular image, or a video.

To achieve the above goals, (mainly) two changes have been made:

  1. The AJAX-ZOOM mouseover extension received the firstItemToLoad option that allows you to specify which item in the gallery should load first.

  2. An additional APP container extension was developed to open an "HTML template" in a modal-like box or full-page overlay. Thus, the handling is similar to the Bootrsap's "modal" component, for which you have to define a reference to a selectable HTML snippet with CSS display: none that makes the modal. Conceptionally, our APP container extension is not entirely the same. Still, you must reference an HTML template for the mouseover extension when launching it from an event on-demand. For more details, see further below on this page.

    The APP container JavaScript extension is entirely based on CSS defined in the extension's stylesheet(s). A CSS library is not applied. No style elements such as width or height are set via JavaScript.

    To override the default values, use the "outerClass" option of the APP container extension that adds a class of your choice to the most outer container. That makes it easy to override the styles, for example:

    
    .axZmAppContainerOverlay.yourCustomClass .axZmAppContainerBox {
        max-width: 1900px;
        max-height: 900px;
    }
                        

Your (third-party) gallery, slider, or HTML elements (links, buttons, images, [...])

The below elements are ONLY meant to show how to use the APP container and determine which item of the AJAX-ZOOM mouseover extension should load first. It is not supposed to be a real gallery; therefore, it contains no images and is intentionally ugly.

A few options you can change directly in this demo

"axZmMode"
- enabled - disabled
Do not use mouseover functionality
"maxZoomMode":
- enabled - disabled
First click zoomes to max level
"fullScreenApi":
- enabled - disabled
browser's Fullscreen API if possible
APP container as modal:
- enabled - disabled
Always disabled by default CSS when @media (max-width: 1023px)
APP container modal class:
If you want rounded borders for the modal window, add border-radius to the .axZmAppContainerContent CSS class.

A fake gallery that can be, for example, a native slider of your theme or something that you have customly created to display your images

360-view No. 1
360-view No. 2
Image No. 1
Image No. 2
Image No. 3
Image No. 4
Image No. 5
Image No. 6
Video No. 1
Video No. 2

To simplify showcasing, we directly add data-azitem attributes to the elements of the fake gallery. You do not need to use those attributes at all. When you trigger the APP container and the AJAX-ZOOM mouseover extension inside, the main task is that a JavaScript function that triggers the APP container receives a value for the "firstItemToLoad" option. It then "forwards" that value to the AJAX-ZOOM mouseover extension and opens the gallery with the correct item loaded first.

Step 1: the HTML template (snippet)

An HTML template is required to be referenced or passed to the APP container as an option. Below, the myAjaxZoomHtmlMarkup is the ID of such a template that is selectable via JavaScript. It has WIDTH and HEIGHT set to 100%, which is fine because it is relative to the space inside the APP container, which has a calculated width and height by itself.

Then, there is an optional header that contains a container for the titles and the close button. You are free not to use that header or place it as a footer to the bottom. The close button can be positioned absolutely and display above.

After the header, there is a slightly modified HTML markup from example32. It is wrapped into a DIV element to fit below the header filling the remaining space - height: calc(100% - 32px). The AJAX-ZOOM mouseover gallery extension will automatically fill the space within this container. Please do not add any inline CSS to it.

Again, you have all the freedom to design your HTML template. For example, you can split it vertically and place some additional information or a shopping cart next to the images. At least for desktop layout.

Step 2: JavaScript - defining the data

Now, we must create the data for the gallery. The window.ajaxZoom = {}; is just a holder object for all variables and functions. It is the same as in example32, except that we define this data in separate variables instead of within the configuration object of the AJAX-ZOOM mouseover gallery extension.

The creation of these data objects may be tricky but necessary. Please consult your web developer or the AJAX-ZOOM support for advice if you have difficulties with this task.

In the below example, the data is outsourced to globally accessible variables. You could, however, compose them directly in the wrapper function (step 4) if you can derive it from, e.g., data-, src, or other attributes via JavaScript.

Step 3: JavaScript - configuration of the AJAX-ZOOM mouseover gallery extension

Below are only a few options that were set. You can find the complete documentation of the options in example32.

Note that the content's data (images, images360, and videos option) are outsourced to separate variables (see the previous step). It is then merged with the configuration object in the next step. You can easily access and exchange the data when, for example, the user switches to see a different product variant with other images or 360-views.

Step 4: JavaScript function triggering the APP container with the gallery

This is your custom function that triggers the APP container with the AJAX-ZOOM mouseover gallery inside - a culmination of the above. A real-life application may contain additional code that derives the final myGalleryAzItem variable that is forwarded as the firstItemToLoad to the mouseover extension. Lastly, the goal is to create a function and bind it to a click event executed when a user clicks on something.

We have a value for the contentHtml option, which is the reference to the HTML template. We have a value for the firstItemToLoad option, which is the item that should load first. And we have the data for 360-views, images, and videos, which is referenced or copied from globally accessible variables.

By means of the onShow callback of the axZmAppContainer extension, the AJAX-ZOOM mouseover gallery extension is finally initiated.

The APP container description, examples, and documentation (temporal on this page)

The new AJAX-ZOOM APP container can open nearly all AJAX-ZOOM examples, that are otherwise embedded, on-demand in a modal box or as a fullscreen overlay.

You can use a customer HTML template and trigger an extension manually in the "onShow" callback, as it is done above with the AJAX-ZOOM mouseover extension. But you can also show AJAX-ZOOM natively, meaning without a "wrapper" extension such as the mouseover extension. That is further demonstrated below with the blue buttons.

The HTML template can contain a header, a footer, or be split to have a bigger space, e.g., for a cart button and other information. In contrast to Bootstrap's modal, however, this HTML template or snippet is not your entire box but only the content inside it. If you remove your content from that outer box, you will still have a container with CSS class axZmAppContainerContent nested within a container with CSS class axZmAppContainerOverlay.

Also, in contrast to Bootstrap's modal, you do not have to specify the height and worry about your content is taller than the screen. Your HTML snippet should be declared as height: 100%; and if you want to split the content vertically or horizontally, add CSS overflow: scroll; to elements of your HTML template.

You can use this APP container with the AJAX-ZOOM mouseover extension, as it is shown in this example. You can also use it with other AJAX-ZOOM examples that trigger on page load and display embedded by default.

Open AJAX-ZOOM natively WITHOUT a custom template in the APP container

When AJAX-ZOOM opens natively without a defined template, a default template applies. You can choose between at least two default templates by changing the "defaultTemplate" option of the APP container extension.

When AJAX-ZOOM opens natively, you also do not need to trigger AJAX-ZOOM manually as it is then triggered automatically within the APP container. So basically, the requirements here are defining the "axZmPath" option, which is the path to the axZm folder, and the "queryString" option.

A 360-view or 3D-view

An image gallery where the first image does not matter

Only images in a fake gallery, first image matters

The task is to open the AJAX-ZOOM native image gallery in the APP container with a particular image loading first for the below fake gallery.

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

The HTML of the fake gallery contains data- attributes that are utilized in a small wrapper function that triggers the APP container. As you can see, you can use any naming for the data parameters or get the information you need elsewhere.

(The below configuration uses the "defaultTemplate" option, which value is 2. You could also build an HTML template and reference it via the "contentHtml" option. If you do so, create a container with a unique ID for the AJAX-ZOOM viewer and pass it to the APP container via the "playerContainerID" option.)

$.axZmAppContainer - documentation (options)

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
Load other examples in slider