example14.php HOME Examples overview Download Ask a question / privacy policy / imprint
example15_clean.php

AJAX-ZOOM - 360°/3D Spin & Zoom JavaScript player - "Responsive Ready!"

Loading, please wait...
Notice: the actually not needed toolbar above can be replaced with an over canvas one, reskinned, extended, reduced or completely removed. Do not pay attention to the design or control elements. Everything is adjustable via 400+ configuration parameters, css and API.
Gallery with 360° objects will be loaded after the first spin is fully loaded, please wait...

Modules / Extensions

"Modules / plugins or extensions" are not needed to use AJAX-ZOOM 360°. However they will facilitate the integration into various established CMS or e-commerce systems like Magento, Prestashop, Opencart, WooCommerce, WordPress as shortcode, Shopware or OXID. Recently we have started to develop and already published some of the modules. More information about modules can be found here.

Hand picked AJAX-ZOOM 360° example highlights

Mouseover zoom + 360 + responsive Fully responsive mouseover zoom with integrated 360°/3D support is a perfect all-in-one solution for e-commerce. Most our e-commerce plugins are based on this example. It does also support 360° "Product Tour" out of the box and the 360° "Product Tour" editor is directly integrated into the backend of the e-commerce modules. Videos are also supported.
Crop editor Fully configurable "cropped thumbs gallery" / "product tour" with "spinTo" and "zoomTo" is definitely must-see! It is integrated into all AJAX-ZOOM e-commerce modules.
Clean example Horizontal slider Resopnsive Free layout
Show 360°/3D spins together with normal images, videos + documents as in "one player"
Clean example Resopnsive Another responsive example of AJAX-ZOOM where settings are set the way that the user has only the possibility to spin at not zoomed state
Hotspot configurator Also check out the clickable and fully configurable HOTSPOTS configurator with really tons of interesting features! It is integrated into all AJAX-ZOOM e-commerce modules.
Clean example Resopnsive Fullscreen
Product configuration Switch between 360 / 3D at any state, also zoomed and fullscreen view. Perfect for product configuration tools. Extendable to use with hotspots or spinTo && zoomTo product tours.

Derived / "clean" examples of example15.php

For a clean example without "360°/3D gallery" and anything else please see here:
https://www.ajax-zoom.com/examples/example15_clean.php
(no PHP code required at the frontend!)
To start AJAX-ZOOM 360°/3D in responsive / adaptive layout, see
https://www.ajax-zoom.com/examples/example15_responsive.php
To start AJAX-ZOOM 360°/3D in fullscreen mode, see
https://www.ajax-zoom.com/examples/example15_fullscreen.php
For a clean example with "360°/3D gallery" and anything else please see here:
https://www.ajax-zoom.com/examples/example15_gallery_clean.php
No PHP code required at the frontend. The PHP code inside the file can be extracted into a different file and called over AJAX, please see comments at the biginning of this PHP file.

Some other implementations & examples of 360 spin tool

To implement AJAX-ZOOM 360/3D in responsive / adaptive layout with or without gallery, see
https://www.ajax-zoom.com/examples/example24.php
To load AJAX-ZOOM 360/3D in a lightbox e.g. Fancybox, see
https://www.ajax-zoom.com/examples/example3.php
To load AJAX-ZOOM 360/3D in a responsive / adaptive lightbox, see https://www.ajax-zoom.com/examples/example27.php
Here you will find a 3D - multirow spin, rotate & zoom example:
https://www.ajax-zoom.com/examples/example28.php
It is not included in the download package, but the only difference between regular 360 spin and multirow is that original images are placed in subfolders of the target folder (the one you will be pointing AJAX-ZOOM at). You do not need to define these subfolders anywhere separately. AJAX-ZOOM will instantly detect and procede all the images in them.
Here is a truly VR spherical example with 9 rows and 90 images per row = 810 images https://www.ajax-zoom.com/examples/example15_vr9.php
Overview of all AJAX-ZOOM examples

General information about the 360 product viewer (non technical)

AJAX-ZOOM is a unique "Flash" free tool to present 360°/ 3D product images on the web. Users can rotate 360° object (the sprite contains a set of single images), also on Z-axis (3D multi-row) and additionally deep zoom on every frame. The adoption of the image tiles technology (image pyramid) allows the 360 product viewer utilize high resolution images without large compression rates, which would destroy the image quality and reduce any benefit of a high resolution photo.

AJAX-ZOOM 360 product viewer has full support for touch devices, e.g. pinch zoom with two fingers and works great mobile phones, tablets or touch enabled notebooks. In the full screen or responsive modes, AJAX-ZOOM loads as many image tiles as needed to fit users screen resolution. Thus it provides details in best possible quality quickly also with low bandwidth connectivity, which is perfect for mobile users. The AJAX-ZOOM 360 product player can be completely restyled (skinned) to fit any design / corporate identity.

Some external controls and API functionality

zoomIn zoomOut reset switch pan switch spin switch crop start spin stop spin spin toggle spinBy (1) spinBy (-1) spinTo third frame and zoom Go fullscreen

360° product gallery

The gallery with other 360/3D objects under the player on this page is optional! Most likely, you will not need this gallery. However, we also provide a "clean" example with this gallery and no PHP in the frontend. The Player and the gallery are loaded over one single javascript function - $.axZm360Gallery(), which is really easy to configure. Update: the "thumb slider" used for the external 360 gallery has been replaced with our own thumbnails slider. It is configurable in many different ways, see demo here.

Do not like the toolbar?

If you do not like the toolbar below the player, see e.g. example28.php, which is fully functional without this toolbar. Of course, you can also completely reskin and disable certain buttons, remove this toolbar completely, enable a different tollbar, which looks more modern and has more options to configure. In addition, you can reproduce the toolbar behavior with buttons placed wherever in your layout using the AJAX-ZOOM API. Please note that this black toolbar might be hidden, if you are on iPad or some other mobile device, because the default settings of the touchSettings option is set to disable this toolbar for touch devices...

For developers - some technical information

Following is some very basic technical information about AJAX-ZOOM. If you are serious about trying and implementing AJAX-ZOOM on your webpage, then viewing other examples and browsing in documentation are highly recommended as first step! After you have found an example, which does conceptually suits your needs, your should download the package and make it work on your server or localhost.

While searching for a suitable example do not pay attention to design, galleries and other things, which are all configurable, adjustable and can be disabled. The point is, that AJAX-ZOOM is so flexible, that our team sometimes does not recognize its own product after it has been implemented and adjusted by the customers. If you are not sure what example is the right one to start with, you can send us a mockup, which would visualize your intent and we will gladly give you a hint.

To load the 360 spinner all you need is to define the directory ("3dDir" parameter), where images (frames of 360) are located. The number of frames depends on the number of images in this directory and will be determined automatically by AJAX-ZOOM! For a single row (360, not spherical 3D) you should have at least 12 images. The more images are available, the smoother is your animation. However, the more images are loaded, the longer it takes for the preload. Therefore, we consider 72 images as perfectly smooth for the web; 36 images is a good average used by many customers these days. You can read about this in detail and test the same 360 object loaded with different numbers of frames.

All image processing including the generation of image tiles is done on-the-fly during the first load of AJAX-ZOOM in the browser. You can however pre-process all your 360s with the provided batch tool (/axZm/zoomBatch.php);

There are several 360/3D specific options to adjust the spin behavior and appearance. However, all other options from plain 2D zoom are applicable to 360 degree player as well! A small selection of selected parameters has been made to be visually changed in this example (more parameters in the online documentation): Reverse spin direction. Enable | disable the blur effect. Disable | enable the navigation toolbar. Disable | enable the zoom slider and disable | enable the spin slider.

By defining the query string parameter in ajaxZoom.parameter "example=17" some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 17){. So if changes in /axZm/zoomConfig.inc.php have no effect look for the same options /axZm/zoomConfigCustom.inc.php; Here you will find more information on how to setup options best.

To interested developers AJAX-ZOOM offers a variety of methods and callbacks to develop highly customized applications. Alternatively, we can create your individual application as a custom work.

free download with sample images and all the examples

About AJAX-ZOOM

AJAX-ZOOM is developed in Germany and was first released in the year 2010. From then until now it has been continuously improved, enhanced and supported. AJAX-ZOOM is based on jQuery (JavaScript) and PHP.

With this fully-featured solution, it is possible to present even ultra-high-resolution photos online in best quality. Via the approx. 400 optional parameters and CSS, AJAX-ZOOM is very flexibly configurable and re-skinnable. All controls can be individually disabled and/or changed in their appearance. Seamless integration into any web page is thus guaranteed.

All you need is a LAMP (Linux, Apache, MySQL and PHP) web server. However AJAX-ZOOM can be also implemented in ASP.NET / IIS web applications without PHP via "Phalanger". For optimal quality and speed, AJAX-ZOOM offers full ImageMagick® support, although LibGD integrated into PHP is generally sufficient. JPG, TIF, PNG, BMP, GIF and PSD image types are supported (TIF & PSD only with "Imagemagick").

Simple integration example code - fixed width and height without 360 gallery

The below code is from example15_clean.php; for 360 gallery and responsive examples please see derived examples and other above.

JavaScript & CSS files in Head


							<!--  Include jQuery core into head section -->
							<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

							<!--  AJAX-ZOOM javascript && CSS -->
							<link href="../axZm/axZm.css" type="text/css" rel="stylesheet" />
							<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
						

HTML markup in body


							<!--  Placeholder for AJAX-ZOOM player -->
							<div id="AZplayerParentContainer" style="margin: 5px 0px 0px 10px; width: 602px; min-height: 400px; color: gray;">
							Loading, please wait..
							</DIV>
						

JavaScript


							// Create empty jQuery object which is interpreted in axZm/jquery.axZm.loader.js
							var ajaxZoom = {}; 

							// Define callbacks, for complete list check the docs
							// https://www.ajax-zoom.com/index.php?cid=docs#API_CALLBACKS
							ajaxZoom.opt = {
							onBeforeStart: function(){
							// Some of the options can be set directly as js var in this callback
							jQuery.axZm.spinReverse = true;
							}
							};

							// Define the path to the axZm folder, adjust the path if needed!
							ajaxZoom.path = "../axZm/"; 

							// Define your custom parameter query string
							// example=17 has many presets for 360 images*
							// 3dDir - best of all absolute path to the folder with 360/3D images
							// *By defining the query string parameter in ajaxZoom.parameter example=17 
							// some default settings from /axZm/zoomConfig.inc.php are overridden in 
							// /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 17){. 
							// So if changes in /axZm/zoomConfig.inc.php have no effect - 
							// look for the same options /axZm/zoomConfigCustom.inc.php; 
							ajaxZoom.parameter = "example=17&3dDir=/pic/zoom3d/Uvex_Occhiali"; 

							// The ID of the element (placeholder) where AJAX-ZOOM has to be inserted into
							ajaxZoom.divID = "AZplayerParentContainer";

							// Load AJAX-ZOOM
							jQuery(document).ready(function(){
							jQuery.fn.axZm.load({
							opt: ajaxZoom.opt,
							path: ajaxZoom.path,
							parameter: ajaxZoom.parameter,
							divID: ajaxZoom.divID
							});			
							});
						

Even easier integration using iframe

For integration within iframe(s) please check example13.php. There is almost no difference between regular integration and within an iframe. Fullscreen or full browser window does also work on IOS. In this example mouse wheel zoom is disabled per parameter so the user can scroll the page down with mouse wheel. However, if you want to put AJAX-ZOOM into a tab or it will have smaller dimensions it does make sense to enable it.

Comments (20)

templateonweb 2017-07-22 20:48:29
templateonweb Hi, i have visited the site and found that this is a good template for making science and research related web sites.

Free Scientific World Template
Vadim Jacobi 2014-08-20 19:13:00
Vadim Jacobi Lola: there is no plugin for VirtueMart but you might want to check this example: http://www.ajax-zoom.com/examples/example15_clean.php
Lola 2014-08-18 19:16:43
Lola Hello,


Is this compatible with VirtueMart?

Thank you.
Mengxianfeng 2013-03-26 15:50:25
Mengxianfeng Thanks for your share, but I have a question: whether I can use this demo on some mobile devices,such as Iphone(IOS),Android?
Kevin 2013-03-06 18:44:28
Kevin There are 24 imgs used in the example with the glasses. Nice result if you ask me. Thanks for sharing!
korosh 2013-03-04 08:25:16
korosh Can you put some code for creating full 3D product viewer? not just 3D rotate
Vadim Jacobi 2012-09-28 23:28:29
Vadim Jacobi It depends on what you mean under smooth :-) To me a 360 spin should have at least 24 frames. 16 do not look very good. Personally I would choose 36, 48 or even 72 frames depending on the product (see the example with the flute above which has 72 frames).
Cebu Web Design 2012-09-28 00:49:57
Cebu Web Design How many images do we need to create a smooth 3D rotation?
Vadim Jacobi 2012-09-13 22:02:05
Vadim Jacobi To all of You who was asking about clickable / mouseover etc. hotspots: the next AJAX-ZOOM version 4.0 will definitely support hotspots! At 2D, 360 and 3D modes, at all zoom levels and at fullscreen mode. Basically it is already working on our prototype, we just need to write an API for handling it (the easy but intriguing part). Hopefully this will be the last new feature among many, many others in version 4.0 so we will be able to present it to You shortly.
Vadim Jacobi 2012-07-15 14:51:45
Vadim Jacobi If you have 5-6 images it is probably not good to use 360 mode to show them. A simple gallery like this: http://www.ajax-zoom.com/examples/example16.php or any other on ajax-zoom.com is better. The economical objection is not really comprehensible to me. If you sell one or two more pieces of your products by offering 360 high resolution view - something, what is natural when you can physically examine it in a store, then all your efforts are surely paid off. One of our customers told me about their buying rate rising by 150% after implementing AJAX-ZOOM 360 view. So what is not economical about it?
test user 2012-07-14 08:26:53
test user How would the rotation effect look if there are only say 5-6 images.

This is for an ecommerce clorhing store products.

It is very difficult to take say more than 5-8 angles for items like shirts, trousers etc.(it is not economical).
Vadim Jacobi 2012-06-22 01:55:09
Vadim Jacobi Andrew : yes, you have to make images from different angles. 360 images would be overkill however. 24-36 or 72 are fully sufficient.
Andrew Barton 2012-06-21 21:18:38
Andrew Barton How do you create the images? Do you need 360 different images or how does it rotate?
Salmec 2012-05-17 13:00:58
Salmec How can i put some interactive maps over the images?
csjthomas 2012-04-20 16:42:31
csjthomas very nice plug in
Vadim Jacobi 2012-01-24 19:07:24
Vadim Jacobi Multiple players on one page are currently only possible inside iframe.
Damian 2011-12-22 16:04:15
Damian Can you combine multiple elements?
Alex Reekie 2011-12-07 14:20:14
Alex Reekie Thanks for this - really great piece of work!
Exactly what I was looking for and I love all the customisation options.
Vadim Jacobi 2011-11-14 06:47:54
Vadim Jacobi Evgeniy: take a look at this option - http://www.ajax-zoom.com/index.php?cid=docs#spinOnClick You could also enable the play/pause button like shown in this example - http://www.ajax-zoom.com/examples/example19.php or use API functions for this purpose.
Evgeniy 2011-10-28 08:22:31
Evgeniy Can I stop the rotation (spin) when clicking the mouse on the image
Can it, then start the rotation by clicking the mouse on the image
As videoplayer ?

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