Magic 360™

Examples

Autospin

Buy now Get support

Auto-spin (twice) on hover.

Infinite auto-spin (hover to pause).

Fast infinite anticlockwise auto-spin (click to pause / continue).

Infinite auto-spin back & forth (non-stop).

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic 360&trade;: Autospin</title>
  4.        
  5.         <link rel="stylesheet" type="text/css" href="magic360/magic360.css" />
  6.         <script type="text/javascript" src="magic360/magic360.js"></script>
  7.        
  8.     </head>
  9.     <body>
  10.        
  11.         <table width="100%">
  12.         <tr>
  13.             <td>
  14.                 <p>Auto-spin (twice) on hover.</p>
  15.                 <a class="Magic360" href="#" data-magic360-options="autospin: twice; autospin-start: hover; filename:shoe-360-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  16.             </td>
  17.             <td>
  18.                 <p>Infinite auto-spin (hover to pause).</p>
  19.                 <a class="Magic360" href="#" data-magic360-options="autospin: infinite; autospin-stop: hover; filename:shoe-360-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  20.             </td>
  21.        </tr>
  22.         <tr>
  23.             <td>
  24.                 <p>Fast infinite anticlockwise auto-spin (click to pause / continue).</p>
  25.                 <a class="Magic360" href="#" data-magic360-options="autospin: infinite; autospin-direction: anticlockwise; autospin-speed: 1000; autospin-start: load,click; filename:shoe-360-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  26.             </td>
  27.             <td>
  28.                 <p>Infinite auto-spin back &amp; forth (non-stop).</p>
  29.                 <a class="Magic360" href="#" data-magic360-options="autospin: infinite; autospin-stop: never; autospin-direction: alternate-clockwise; filename:shoe-360-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  30.             </td>
  31.        </tr>
  32.        </table>
  33.        
  34.     </body>
  35. </html>