Magic 360 Flash™ integration

Spin and zoom your products in gorgeous 360° rotation with this Flash 360 spin software.

1. Photography

You need a series of product photos to spin your products. If you don't have suitable photos, use our photography service and we'll shoot beautiful photos for you.

2. Number of images

Spin and zoom requires a lot of images. For a smooth spin, 36 images is best, but that means you also need 36 larger images for zooming. To reduce the wait time while images download, you could use only 18 small images and 18 large images. 18 images will download in half the time as 36 images, the user can still see the product from all angles, it just won't be as smooth.

This 18, 36, 72 images will help you decide.

Alternatively, choose Magic 360™ JavaScript instead of Magic 360™ Flash because it downloads the large image on demand, therefore saving a huge amount of data transfer.

3. Installation

1. Download the Magic 360 Flash^™ demo (zip).
2. Upload themagic360flash folder to your server.
3. Reference the magic360flash.js file 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 your main image with an img tag.
5. Add a rel attribute with all your images each separated by *.
6. Wrap an a tag around your img, with an href of # and a class of Magic360Flash.
7. Add all your large images in a rel attribute of the a tag, separated by *.
   Your HTML code could look something like this:

4. How to customize

There are 22 options available to adjust, listed in the Parameters table below. To change your settings, add a <script> tag before your </head> tag like so:

Add a comma after setting each value you choose, except for the last value otherwise Internet Explorer will throw an error (a well-known bug that Microsoft fixed in IE8).

5. Magnifier

The magnifier shape can be a circle or square. The height and width can be set by 'magnifier-size' or individually like so:

The magnifier can have a glow or shadow behind it. It can fade in on click, or it can pulse on click, or it can be set to 'none' to show immediately on click. The duration of the fade or pule can be chosen in milliseconds. Example:

The magnifier border width and color can be changed, for example:

6. Faster downloading

Two tricks can help you reduce the time taken to download the images. Ideally, you would use two sets of images - a small set for the spin and a large set for the zoom - but you could use just one set of images instead.

Use one set of large images and let Magic 360 Flash™ scale them down for use as small images. The result is not as sharp, but it means you don't need to load a separate set of small images. This example uses only 18 large images and 1 small image:

Alternatively, use one set of small images and let Magic 360 Flash™ scale them up for use as large images. The zoomed image is not sharp but the results are better than nothing if you don't have higher resolution images available. Use the 'magnifier-simulate' parameter and a value of 150% to 200%. For example:

7. Speed

Speed up or slow down the rotation speed so that users can easily see your product from every angle. The default is 10. Double the speed by changing it to 20:

8. Smoothing

Smoothing will gradually slow down the image when you stop spinning it. You can increase smoothing, decrease it or remove it. For example, this will triple the amount of smoothing (the default is 10):

9. Blur

Motion blur is applied to the image as it spins, making it more realistic. The faster you spin, the more it blur. The default level is 10. Adjust this number to increase/decrease blur, or set it to 0 to remove blur:

10. Spin method

The most natural user interaction is to spin the image as you move your mouse cursor over it. You can change the default 'hover' to make it spin on 'click' or 'drag'. Example:

11. Loading bar

A progress bar displays above your product while all the images are downloading. You can remove the bar by setting the height to zero:

This example below will change the color to green and the height to 16px:

12. Autostart

If you want to make the spin a centrepiece of your page, consider spinning it automatically once the images are loaded. Autostart the spin like so:

The spin will stop once clicked. Or you can let it spin continuously like so:

13. Delimiter

Each image in your spin must be separated by a *. Or you may choose another character, such as ~ like so:

14. SWF initialization

The images for the spin will download automatically, providing at least part of the image can be seen in the users browser. If the 360 spin is out of view (e.g. further down the page) then the images will load when the user scrolls down. This prevents unnecessary bandwidth usage and is a feature of the Flash player.