Installation
Buy now Get support
All the files you need are contained in the magic360 folder within the zip file you downloaded.
- Upload the magic360 folder to your server.
- Reference the magic360.css and magic360.js files before your </head> tag*. Example:
<link rel="stylesheet" type="text/css" href="/magic360/magic360.css"/>
<script type="text/javascript" src="/magic360/magic360.js"></script>
- 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 #.
- Specify the format of your file names using the filename parameter inside a data-magic360-options tag . Example:
<a href="#" class="Magic360" data-magic360-options="filename:ring-{col}.jpg;"><img src="ring-01.jpg" alt=""/></a>
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
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
More detailed installation instructions are on our website. If you get stuck, contact us.
|