3D product views, JavaScript spin viewer

AJAX-ZOOM demo

3D zoom & pan product viewer

3D photography views are multiline or multi-row 360 images. Photos of an object are taken not only from each angle horizontally but also from the same angles when the camera is shifted vertically following the spherical path. We call it a row or line. So talking about 3D in the AJAX-ZOOM viewer's software context implies that there are at least two 360 round views of the same product that have an equal amount of images in each of the round views.

AJAX-ZOOM supports the multi-row 360 images too. You can find an isolated example of a 3D product view in this example.

As of AJAX-ZOOM-related integration and file structure, the basic difference between 360° and 3D is that for 360°, you need to provide the path to a folder, where 360-degree image frames are located directly in this folder. Whereas for 3D, you need to provide the path to a folder, which contains further subfolders with images of each 360 round view in each subfolder. Once again, the number of image files in each subfolder must be equal. Also, all images must have the same dimensions - width x height. Otherwise, AJAX-ZOOM throws an error.

The naming of the files does not have to follow a specific scheme. You just need to name them the way that a machine can sort the image files using a regular sorting algorithm. However, you must name files in each folder differently. This rule applies to rows of a 3D view as well as different 360-degree views in general. The reason is the AJAX-ZOOM's caching caching mechanism that relies on this rule.

More information about AJAX-ZOOM 3D product viewer

If you want to create full spherical 3D views, meaning views not only from the side and top of the product but also from the bottom, please pay attention to the naming and the order of the files for frames, which show the object from the bottom side! For the views from the bottom side, you must name and sort the files in the mirrored order! It is also easy to make clear why in a demonstrative way: take a coin and turn it leftwards, looking at it from the top. Keep turning the coin in the same direction and slowly shift your focus to look at it from below. As you can see, the coin now turns to the right and not left.

The number of horizontal rows or subfolders in the AJAX-ZOOM context starts from two and is limited by the AJAX-ZOOM's spinMaxRows option. The 3D view of a shoe above is a semi-spherical representation with 7 rows and 24 frames in each row. To the right, you can see a full spherical 3D example, which has 9 rows and 90 images/frames in each row.

The player has options to change the direction of rotation horizontally and vertically, also many other 360 specific options, which are applicable for 3D as well. For example, you can adjust the sensitivity of rotation depending on mouse movement distance, enable or disable rotation during loading, or turn on and off various elements of the UI elements and change their appearance.

AJAX-ZOOM supports Hotspots on 3D product views too. Moreover, you can combine hotspots with the "360 / 3D Product Tours". With these two tools, AJAX-ZOOM is a fully-fledged 3D / 360 software that lets you visually describe and interactively present your product on the web in great detail with unlimited possibilities. If you are going to use one of our modules, you will find both editors for hotspots and product tours inside the admin area and will be able to use them immediately after installation.

AJAX-ZOOM examples with 3D images content

Please note, that you can load 3D in all examples with 360.

example28

This example is about the UI and 3D product viewer handling.

It intends to show two things. First is that it is possible to achieve full control over 360 spin and even handling of a 3D object view with just two control buttons. In this example configuration, there is no navigation bar and the UI spin slider element does not show as well. However, even if you remove all remaining UI elements, your users would still be able to interact with AJAX-ZOOM 360 spins or 3D object views.

Secondly, the example object loaded into the viewer on this website is a multilevel (multi-row) 3D product view. As of AJAX-ZOOM viewer configuration, there is no difference between a 360 view and 3D product view. AJAX-ZOOM differentiates between a 360 view and 3D view by the file structure it finds in the folder you pass to the viewer. The example explains in detail what it is about exactly.

View

example29

AJAX-ZOOM extension to display 360 product views or 3D product views together with flat images in one viewer.

Optionally add Videos from Youtube, Vimeo, and Dailymotion . You can also add other content to display within the iframe or invoked by AJAX request .

The gallery shows a thumbnail for each item. It retrieves cover images for videos and 360 images automatically. For alternative content you can define destinctive icons to display in the gallery.

The HTML markup and CSS for the viewer is not too abundant. To define content that you want to show in the gallery you only need to fill one data option. It is an array where you can set the type and the source of each item. The gallery preserves the order of items in the array.

The entire code of the extension is open for editing by developers.

View

example29_clean

Clean (without too much redundant code) example for media gallery with 3D / 360-degree product spins, flat images, videos, and other content.

View

Modules / plugins

Using the modules/plugins is optional! It is not required to use them. You can use AJAX-ZOOM as a stand-alone application or integrate it manually into nearly all systems.

However, if a module for your CMS or e-commerce/shopping cart system is available, it tremendously facilitates and speeds up the integration. Provided that your server meets technical requirements, you can have AJAX-ZOOM up and running within a few minutes. You can install and configure these AJAX-ZOOM modules with just a few clicks and without writing a single line of code.

Available are modules for Magento, Prestashop, WooCommerce (WordPress), Opencart, Shopware, and Oxid. The last two are commonly used in German-speaking countries.

Compatibility

License

The license price primarily depends on the number of different images that display in the AJAX-ZOOM image viewer on a domain. Unlimited options are available. The costs for the regular licenses are one-time payments! You can find the complete license agreement and price list on the download page. Before ordering, we advise you to download and test the demo (light) version within your development environment.

If necessary, we can issue time-limited license keys free of charge. However, AJAX-ZOOM and AJAX-ZOOM modules / plugins for diverse CMS and shopping carts should work with few restrictions without entering any licensing data! If something does not work as expected, there must be a different reason than missing license. Do not hesitate to contact AJAX-ZOOM support if you encounter any technical difficulties.