example29_fullscreen.php HOME Examples overview Download Ask a question / privacy policy / imprint
example29_responsive_easy.php

Responsive 3D/360 spins, images, videos and documents in one gallery

Loading, please wait...
Gallery with 360 objects will be loaded after the first spin is fully loaded, please wait...

Responsive AJAX-ZOOM viewer with media gallery and explanation of how to change the size of the viewer using JavaScript.

This procedure is helpful when you want to place the gallery inside a container, which size can change by JavaScript. In this case, you need to synchronize the resizing operations by using the AJAX-ZOOM $.fn.axZm.resizeStart API method. You do not have to do that if the size of the responsive container depends only on the size of the browser window. In this case, the viewer adapts to the size of the container automatically.

In case at the end, the responsive AJAX-ZOOM parent container resizes by JavaScript, e.g., by a click on a button or some other JavaScript that controls the layout, then you should execute jQuery.fn.axZm.resizeStart(3000) when the action starts to resize the parent container and jQuery.fn.axZm.resizeStart(1) when the action definitely ends.

The resizing could occur when a script changes the inline style attribute of the AJAX-ZOOM parent container directly, or it adds a different CSS class to it. A script that is not part of AJAX-ZOOM may also add a CSS class to some "higher" parent container in your layout, and since a CSS class may rule the descendants too, you should consider this in case there are any layout issues with AJAX-ZOOM and apply the resizeStart API method if possible. Again, there is no need to do anything if your responsive layout is resized by window resize or by orientation change events only.