Magic 360™

Examples

API controls

Buy now Get support

You can start and stop Magic 360, spin and magnify image by using the API.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic 360&trade;: API controls</title>
  4.        
  5.         <style type="text/css">
  6.             .sep { margin-bottom: 10px; }
  7.         </style>
  8.         <link rel="stylesheet" type="text/css" href="magic360/magic360.css" />
  9.         <script type="text/javascript" src="magic360/magic360.js"></script>
  10.        
  11.     </head>
  12.     <body>
  13.        
  14.         <p>You can start and stop Magic 360, spin and magnify image by using the API.</p>
  15.         <a id="spin-1" class="Magic360" href="images/bag/bag-800-01-01.jpg" data-magic360-options="rows: 4; columns:12; autospin: off;"><img src="images/bag/bag-400-01-01.jpg" alt="" /></a>
  16.        <div>
  17.         <button id="button-stop" onclick="Magic360.stop('spin-1');">Stop Magic 360</button>
  18.         <button id="button-start" onclick="Magic360.start('spin-1');">Start Magic 360</button>
  19.         <div class="sep"></div>
  20.         <button onclick="Magic360.spin('spin-1');">Spin bag</button>
  21.         <button onclick="Magic360.pause('spin-1');">Pause spin</button>
  22.         <button onclick="Magic360.spin('spin-1', -1);">Spin one frame backward</button>
  23.         <button onclick="Magic360.spin('spin-1', 1);">Spin one frame forward</button>
  24.         <button onclick="Magic360.jump('spin-1', 1);">Jump to next row</button>
  25.         <button onclick="Magic360.jump('spin-1', -1);">Jump to previous row</button>
  26.         <div class="sep"></div>
  27.         <button onclick="Magic360.fullscreen('spin-1');">Go full-screen</button>
  28.         <button onclick="Magic360.magnifyOn('spin-1');">Turn on magnifier</button>
  29.         <button onclick="Magic360.magnifyOff('spin-1');">Turn off magnifier</button>
  30.         <button onclick="var frame = Magic360.getCurrentFrame('spin-1'); alert('Current frame details: row='+frame.row+', column='+frame.column);">Get current frame</button>
  31.        </div>
  32.        
  33.     </body>
  34. </html>