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

3D/360 product spin configuration widget for developers

Click or double tap on the 360 spin to open it in a full-page modal box!

Eames® lounge chair - 360° view

Click or double tap on the 360 spin to open it in a full-page modal box!

This example is a proof of concept that shows several AJAX-ZOOM non-default options, API and event hooks playing well together while developing a non-standard 360 product viewer.

Within the responsive layout, the viewer displays left from the container with the description and color swatch buttons. The ability to zoom in this state is disabled. When the user clicks on the viewer, instead of zooming it opens in a modal box that is configured via CSS to fill the screen. Within this box, the 360 view automatically zooms to the level where it fills the entire surface of the box. The result is similar to background-size: cover in CSS.

AJAX-ZOOM setup

All custom JavaScript code and CSS that creates this functionality is inline in the source of this example. It has many comments, so as a developer you can quickly understand what it does and adapt it to your requirements. Even though this page includes bootstrap CSS, the widget does not depend on it!

360 product tour using AJAX-ZOOM API methods only

At the bottom of the modal box, there is a semi-transparent overlay with additional text and UI elements. Besides the same buttons for switching between variations, there are named buttons for spinning and zooming to a particular area of interest.

This functionality is similar to AJAX-ZOOM 360 product tour except that here, the custom code applies only the jQuery.fn.axZm.spinTo API method and no thumbnails gallery or other plugins. Accordingly, data from the product tour editor is not required! However, if data from the product tour were available, as a developer you would be undoubtedly able to adjust the custom code of this example to interpret it as well.

Get crop positions for AJAX-ZOOM spinTo and zoomTo API methods

The "spinTo && zoomTo" data can be grabbed in many different ways. A designer could get this data in Adobe Photoshop like it is described below. We could also create a small online widget based on example35.php or adapt it for generating JSON of any structure. If you want certain areas of the image the x1,y1,x2, and y2 coordinates can be defined as percentage values, e.g., second part of the image divided into 5 "stripes" vertically would be [0, '20%', '100%', '40%'] which is easily calculated.

Get x1, y1 positions for spinTo and zoomTo with Photoshop CS6

Get x2, y2 positions for spinTo and zoomTo with Photoshop CS6

JavaScript and CSS files

Besides the jQuery core, you need only two files to include into head or body section.

Show / hide - JavaScript and CSS files


<!--  Include jQuery core if not already present -->
<script type="text/javascript" src="../axZm/plugins/jquery-1.8.3.min.js"></script>

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

HTML markup

Below is a copy of the HTML from this example that contains additional p tags you do not need. There is also no need to use the CSS bootstrap classes. What you need are the containers with the IDs azViewerParentContainer and azColorSwathes.

Show / hide - HTML markup

JavaScript code that defines data for spin & zoom (product tour)

The main purpose of this code is to set the label name, title, description and coordinates for the spin & zoom buttons that are created by the main custom JavaScript below. You do not need to define this data for every 360 objects or make it different. E.g., you can set it for one 360 product variant and reference the same data for other variants: window.azWidgetVars.data['orange'] = window.azWidgetVars.data['black'];. The keys "orange" or "black" are just examples. You can set any ID or a different string to reference a 360 rotation. In the custom JavaScript below, you should adjust the window.azWidgetVars.getSpinName function.

Show / hide - JavaScript

The main custom JavaScript that extends the AJAX-ZOOM functionality

You can use it as it is with just a few adjustments, or extend it as you wish.

Show / hide - JavaScript
Load other examples in slider