Build your perfect spin and then copy the HTML code.

Common settings
Number of images per row
Number of images per column
Rotate spin in opposite direction on X-axis
OFFON
Rotate spin in opposite direction on Y-axis
OFFON
When to download the images
Autopsin
Automatically spin the image
Speed of auto-spin
Direction of autospin
Start autospin on page load, click or hover
Stop autospin on click, hover or never
Full-screen & Magnifier
Enable full-screen spin
OFFON
Enable magnifier
OFFON
Shape of magnifying glass
Width of magnifying glass (if circle or square)
Hint
Show hint message & arrows
OFFON
Text shown on image (for computers)
Text shown on image (for mobile devices)
Other settings
The format of your image file names
The format of your large image file names
Continue spin after the last image on X-axis
OFFON
Continue spin after the last image on Y-axis
OFFON
Number of digits used for column numbering
Number of digits used for row numbering
Starting index of column numbering
Starting index of row numbering
Sensitivity on X-axis:
Sensitivity on Y-axis:
Column from which to start spin. "auto" will start from middle
Row from which to start spin. "auto" will start from middle
Method for spinning the image
Show right-click menu on the spin
OFFON
Number of frames to spin on mousewheel (0 - turn off rotation on mousewheel)
Smoothly stop the image spinning
OFFON
Load only every second (2) or third (3) column so that spins load faster
Load only every second (2) or third (3) row so that spins load faster
Folder for images. Only needed if different from img src folder
Folder for large images. Only needed if different from href folder

Apply settings

<!-- Main 360 -->
<a class="Magic360" id="spin" data-options="columns: 12; rows: 4; filename: bag-small-{row}-{col}.jpg; large-filename: bag-large-{row}-{col}.jpg" title="..." href="bag-large-{row}-{col}.jpg">
<img src="bag-small-{row}-{col}.jpg">
</a>
<script>
var Magic360Options = {
    'columns' : 12,
    'rows' : 4,
    'filename' : 'bag-small-{row}-{col}.jpg',
    'large-filename' : 'bag-large-{row}-{col}.jpg'
};
</script>

Also see more examples and the installation instructions.