Video tutorial:

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

Naming your images

Your images should have filenames which identify the sequence using numbers starting at 01. 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

Numbers can be anywhere in the filename, with or without hyphens. They must always use 2 or more 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.

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:

ring-01-01.jpg

ring-01-02.jpg

ring-01-03.jpg

ring-01-04.jpg

ring-01-05.jpg

ring-01-06.jpg

ring-01-07.jpg

ring-01-08.jpg

ring-01-09.jpg

ring-01-10.jpg

ring-01-11.jpg

ring-01-12.jpg

ring-02-01.jpg

ring-02-02.jpg

ring-02-03.jpg

ring-02-04.jpg

ring-02-05.jpg

ring-02-06.jpg

ring-02-07.jpg

ring-02-08.jpg

ring-02-09.jpg

ring-02-10.jpg

ring-02-11.jpg

ring-02-12.jpg

ring-03-01.jpg

ring-03-02.jpg

ring-03-03.jpg

ring-03-04.jpg

ring-03-05.jpg

ring-03-06.jpg

ring-03-07.jpg

ring-03-08.jpg

ring-03-09.jpg

ring-03-10.jpg

ring-03-11.jpg

ring-03-12.jpg

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

Referencing images

Your images will be referenced using {col} to denote the image column number and {row} if your spin has multiple rows (for up/down spins).

1. Create an <img> tag for the first image you want to show. (You can choose an image other than number 01 if you like - see how to choose the first image). For example:

<img src="ring-01.jpg" />

2. Surround the <img> with an <a> link and use the filename parameter to denote the names of your images, inserting {col} or {row} in place of the numbers. For example:

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

The large-images parameter is optional. If you have large images, your spin can be magnified on click and also viewed in full-screen. The images can have any filenames you wish, just reference each one of them like in the example above.

Full-screen

If you have a large set of images (e.g. small 260px JPEG, large 800px JPEG), the full-screen button in the top right will be enabled when you reference the images like so:

Specify the large image location in the href.

Specify the structure of your file names with the large-filename parameter.

Full-screen magnifier

If the large images are larger than the users screen can display, the images will be reduced to fit the screen and will be magnifiable on click. This can be used to show a more detailed view, though bear in mind that very large images (typically above 900px height) can take a long time to download.

The magnifier feature is automatically available when image size allows.

This example (which uses lazy loading) has 24 frames of 149px by 300px images and a full screen view of 860px by 1764px images. Providing your screen is less than 1764px, you will notice that the full-screen image can be clicked to zoom in. Try it:

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 data-options tag, specify the number of rows and columns in your spin.

Hint

A "hint" message helps to show that the image can be spun around. It will disappear on click (or on hover if you have set the spin method to hover). It won't be shown if you set your spin to rotate infinitely.

You can change the text by using Magic360Lang and setting hint-text (for computers) and mobile-hint-text (for mobile devices). For example:

Spin on hover

The image will spin on drag by default. You can also set it to spin on hover. On touch-screen devices (iPhone, iPad etc), it will always spin on drag (without a cursor, there is no such thing as hover).

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:

Start at column 16:

Start at column 1:

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 progress indicator 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:

There is also a row-increment parameter in case your spin has multiple rows and you wish to skip some of them.

Lazy loading

Lazy loading can reduce the download time of your page by preventing images from downloading until the users scrolls to that part of the page. It's suitable if your pages are long and your 360 spins are placed further down your page (below the fold).

This spin uses lazy loading:

Lazy loading images do not have the SRC attribute, so the browser does not load them on page load. For example:

Instead, you can set the SRC on demand with JavaScript. Magic 360 waits for the SRC attribute on the and initialization begins once it is there. Here is some sample JavaScript you can use to set the SRC:

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.