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

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

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.

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