3D/360 product spin configuration widget for developers

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!

• For the initial view, the zoom functionality is disabled (you can enable it of course).
• Switching between the 360s is performed with jQuery.fn.axZm.loadAjax360Type API method, which allows loading a different 360 without zooming out.
• A click on 360 opens the animation in a full-page modal box. By default, it opens covering the entire viewport of the page, but you can change the CSS to make it look like a modal box. The code creates the modal box dynamically. AJAX-ZOOM viewer appends then to that box via the jQuery.fn.axZm.fullScreenRelChange AJAX-ZOOM API method. This method changes the parent container of the AJAX-ZOOM viewer and adjusts all measures automatically.
• While it displays in the modal box, some of the AJAX-ZOOM settings change, e.g., zoom is activated again.
• Also, within the modal box, the custom JavaScript code appends some HTML elements to the layer with the ID axZm_zoomLayer. Generally, you can append anything to the axZm_zoomLayer, which is an element of the core AJAX-ZOOM viewer. Particularly in this modification, the code appends a semi-transparent overlay that contains placeholders for description, buttons for switching between variants and dynamically created buttons to spin and zoom to spots of the 360 view.
• You can define the titles and descriptions, as well as labels for the "spinTo" buttons in a JSON-type JavaScript object. This object can be easily injected with any server-side code or retrieved from a database controller via JSONP and the like.

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.

<!--  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.

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.

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.