By default settings, AJAX-ZOOM can spin at a zoomed view. In this example, AJAX-ZOOM media gallery settings are set in the way that for 360 product views, a user has only the possibility to spin a product at none-zoomed state. Additionally, on mouse click or double tap, the media viewer zooms to the maximal zoom level, which is 100% of the original image resolution. At this zoom state, the second click or double tap on touch devices makes the viewer zoom out so that the entire image is visible again.
Indeed, there is nothing special about these features except the loading time of the zoomed view. Because AJAX-ZOOM is using the image-tiles technology, it does not need to load the entire high-resolution image when the user zooms in to see a portion of an image. What AJAX-ZOOM does instead is streaming only the small part of the viewport that is visible to the user. You can, however, disable this image tiles feature by enabling the AJAX-ZOOM simple mode option. It makes AJAX-ZOOM loading and displaying the entire source image on zoom or whenever it is reasonable. Same way, as most of the similar software, does.
What is also different in this example is that in contrast to other examples starting with 29,
the thumbnails gallery with media items shows at fullscreen mode too.
That is just a preference option in the
$.axZm360Gallery extension to AJAX-ZOOM core.
$.axZm360Gallery extension contains most code that manages the media gallery.
You can configure options of the extension same way as you would do it using any other jQuery plugin.
Those trigger as AJAX-ZOOM callbacks/hooks at certain events.
You can define and pass these or maybe your additional custom callback functions
through the options object of the
If that is not enough, you can edit the code of the
It is not obfuscated and has some comments that help you initially to get your bearings in the code.
The AJAX-ZOOM viewer and the media extension is manually integrable into any responsive or adaptive layouts. For some e-commerce / CMS software packages, AJAX-ZOOM offers modules/plugins that you can install within a few minutes. Those are really well-elaborated software pieces that perfectly integrate into the respective software. Despite that in those modules, we use a different AJAX-ZOOM example / extension, most of the features of this extension are available too. Generally, the example32 is an obvious alternative to this extension you should consider to use if a media gallery with 360 views and videos is what you a looking for.
There is also some other css which overwrites the defaults from various css files. Please see source code.Show / Hide Code
<!-- Container where AJAX-ZOOM will be loaded into --> <div id="axZmPlayerContainer"> <!-- This div will be removed after anything is loaded into "axZmPlayerContainer" div --> <div style="padding: 20px; font-size: 16pt">Loading, please wait...</div> </div> <div id="spinGalleryContainer"> <!-- Thumb slider --> <div id="spinGallery"> <!-- Temp message that will be removed after the slider initialization --> <div id="spinGallery_temp" class="spinGallery_temp"> Gallery with 360 objects will be loaded after the first spin is fully loaded, please wait... </div> </div> </div>
elseif ($_GET['example'] == [someValue])