| # 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> *If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page. 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.