Magic 360™ integration

Spin your products in gorgeous 360° rotation.

1. Demo

Magic 360™ can be customized in many ways. This page explains how. For inspiration try these 9 examples.

2. Installation

Quick install:

1. Download the Magic 360^™ demo (zip).
2. Upload the magic360 folder to your server.
3. Use the wizard to create the HTML for your spin.
4. Copy and paste the HTML into your page.

Detailed install:

1. Download the Magic 360^™ demo (zip).
2. Upload the magic360 folder to your server.
3. Reference the magic360.js and magic360.css files before your </head> tag. (If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.)
4. Insert an <img> tag for the first image in your spin. Wrap an <a> tag around it with a class of Magic360 and href of #.
5. Add a rel tag with the filename parameter (described in detail below).
   A basic HTML page could look like this:

6. Refer to the instructions below to add a magnifier or create multi-row 3D spins.

Video tutorial:

This 6 minute tutorial shows you how to install and customize Magic 360™.

3. Naming your images

Your images should have filenames which identify the sequence they should appear in. For example, a 36 image spin might have filenames like this:

• ring-01.jpg
• ring-02.jpg
• ring-03.jpg
• etc...
• ring-34.jpg
• ring-35.jpg
• ring-36.jpg

File names can be anything providing there is a sequence of numbers. These will be referenced using {col} for example: ring-{col}.jpg. Step 3 below shows you how.

A multiple-row spin, which can rotate images up/down as well as left/right, should have a numbered sequence for the row and the column. For example, a spin with 12 columns and 3 rows might have filenames like this:

The first number is the row and the second number is the column. These will be referenced using {col} and {row} for example: ring-{row}-{col}.jpg.

Numbers can be anywhere in the filename, with or without hyphens. The only requirement is that they follow a common sequence starting at 01 for the first column and row. File numbering should use 2 digits i.e. 01, 02, 03, not a single digit like 1, 2, 3. If you need to rename many files, a quick method is to use this free File Renamer program.

4. Referencing images

To reference your images, create an <img> tag for the first image you want to show. It does not need to be the image with the number 01, it can be any of the images within your spin (see "The first image"). For example:

You should describe the file naming format of your images with the filename parameter. Where the column or row numbers appear in your file names, use {col} or {row}. For example:

If your spin has 36 images in 1 row, then you are all done as those are the default values expected by Magic 360™. If you have a different number, you should specify the number of columns and rows that make up your spin. This example is for a spin with 12 columns and 3 rows (36 images in total):

5. Magnifier

A magnifier can be shown if you have a set of large images (example: small image 260px width, large image 800px width).

To show the magnifying glass:

1. Specify the large image location in the href.
2. Specify the structure of your file names with the magnify-filename parameter.
3. Set the magnify parameter to true.

For example:

6. Magnifier size

The magnifying glass will automatically show 80% of the image width. You can adjust this percentage, for example:

Or you can set the size in pixels, for example:

7. Multiple rows

To create a 3D spin that rotates up/down as well as left/right, the product should be photographed in different vertical positions (rows). In the rel tag, specify the number of rows and columns in your spin.

This example has 4 rows with 12 columns per row (48 photos in total):

To add a magnifier, link the href to the large image, specify the filename structure using the magnify-filename parameter and set the magnify parameter to true. For example:

8. The first image

You can choose any image as the first one displayed in your spin. Specify your chosen image in the <img src="">. For example:

Start at column 16:

Start at column 1:

9. Spin method

The image can spin on mouse hover or on drag. The default is drag and on touch-screen devices (iPhone, iPad etc) it will always spin on drag (without a cursor, there is no such thing as hover!).

To spin the image on hover, set the spin parameter to hover like so:

10. Auto-spin

Draw attention to your spin by making it to spin automatically. By default, it will spin once on page load.

You can set it to spin on hover or on click or any combination. For example, to make it spin on page load and again on hover, use the autospin-start parameter like so:

You can set the autospin parameter to spin twice on page load like so:

Or set it to spin infinitely like so:

An infinite autospin will stop upon click. You can prevent user intervention to make it spin forever, like so:

Turn off autospin completely like so:

The autospin will automatically start with the row / column specified in the src. In the unlikely event that you want to start the autospin from a different image, you can specify another row and column by using the start-row and start-column parameters, like so:

11. Direction

The image will rotate clockwise by default. You can make it rotate anti-clockwise like so:

12. Speed

You can speed up or slow down the rotation speed. The default is 50. Make it faster by increasing the number (maximum 100) or slow it down by decreasing the number (minimum 1). For example:

13. Smoothing

Smoothing will gradually slow down the image when you stop spinning it. You can remove smoothing by setting the smoothing parameter to false. For example:

14. Loading message

A progress bar displays over your product while the images are downloading:

You can change the "Loading..." text by setting the loading-text parameter with a Magic360.lang object. For example:

You can change the colors, size and borders of the loading bar. This example changes colors to green, increases border width, reduces the div width / height, removes the animation and reduces rounded corners:

Here are the edited styles to achieve that look:

You can remove the loader entirely by setting the height to zero:

If the user clicks to zoom in, this animated GIF is displayed while the large image is downloading:

You can change that loading GIF by editing this style in magic360.css:

15. Initialization

The images in your spin will download automatically once the DOM is ready (i.e. once the rest of the page has downloaded). The first image to download is the main image declared in the <img>, then the other images will be fetched while the "Loading..." message is shown.

This provides the best/fastest user experience but uses the largest data transfer on your server. You can reduce data transfer by changing the initialize-on parameter to download the images on hover or click. For example:

Magnified images always download on demand if/when the user clicks to zoom in. They don't download on DOM ready (to save on data transfer).

16. API

Use the Magic 360™ API commands to change your images dynamically (AJAX):

• Magic360.start() - Start all spins
• Magic360.start(id) - Start spin by id
• Magic360.stop() - Stop all spins
• Magic360.stop(id) - Stop spin by id
• Magic360.spin(id/*, frames*/) - Spin image by +/-XX frames. If frames omitted, start infinite spin.
• Magic360.magnifyOn(id) - Turn on Magnify mode on a particular spin by #id
• Magic360.magnifyOff(id) - Turn off Magnify mode on a particular spin by #id

Some examples of how you could use the API:

Stop Magic 360 Start Magic 360 Spin shoe Pause spin 1 frame forward 1 frame backward Turn on magnifier Turn off magnifier

In the examples, the shoe has an id of spin-1. Here is the HTML for those 8 buttons:

17. JavaScript callbacks

You can trigger events once all images have loaded by defining a function for the callback onready. It has all sorts of potential uses - you could allow a user to switch sets of 360 images on a page or you could show some text over a spin once it is ready to use.

The following example will display an alert "360 is ready":

Or you could trigger it like so:

In those examples, spinA is the ID of the particular spin on your page with id="spinA", allowing you to choose a particular spin if you have more than one on the page.

18. Buttons

You can change the 360 / magnify icons that show in the top right corner. Choose between the icons below that come with Magic 360™, or design your own!

Horizontal buttons

Vertical buttons

To use vertical buttons, open magic360.css and change the width, height and URL in the style .Magic360 .controls, for example:

Change the styles .Magic360 .controls.magnify and .Magic360 .controls.spin like so:

19. Button text

The text shown on hover over the buttons can be adjusted. This is particularly useful for multi-language websites. Specify Magic360.lang and the parameters button-magnify and button-spin, like so:

To change the font and color of the text, open magic360.css and add the style .MagicToolboxTooltip with your preferred font settings, for example:

This is how it could look:

20. Ways to apply settings

There are 2 ways to change parameters:

1. Apply parameters via the rel attribute, for example:

2. Or, apply parameters globally (to all spins on the page) with a script tag. For example:

If you use asynchronous JavaScript loading, use Magic360Options (instead of Magic360.options). For example:

Likewise, for asynchronous JavaScript loading, use Magic360Lang (instead of Magic360.lang). For example:

Be sure to add commas after all variables, except the last one (or IE will give an error).