| # 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: <html> <head> <title>Magic 360&trade;: API controls</title> <style type="text/css"> .sep { margin-bottom: 10px; } </style> <link rel="stylesheet" type="text/css" href="magic360/magic360.css" /> <script type="text/javascript" src="magic360/magic360.js"></script> </head> <body> <p>You can start and stop Magic 360, spin and magnify image by using the API.</p> <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> <div> <button id="button-stop" onclick="Magic360.stop('spin-1');">Stop Magic 360</button> <button id="button-start" onclick="Magic360.start('spin-1');">Start Magic 360</button> <div class="sep"></div> <button onclick="Magic360.spin('spin-1');">Spin bag</button> <button onclick="Magic360.pause('spin-1');">Pause spin</button> <button onclick="Magic360.spin('spin-1', -1);">Spin one frame backward</button> <button onclick="Magic360.spin('spin-1', 1);">Spin one frame forward</button> <button onclick="Magic360.jump('spin-1', 1);">Jump to next row</button> <button onclick="Magic360.jump('spin-1', -1);">Jump to previous row</button> <div class="sep"></div> <button onclick="Magic360.fullscreen('spin-1');">Go full-screen</button> <button onclick="Magic360.magnifyOn('spin-1');">Turn on magnifier</button> <button onclick="Magic360.magnifyOff('spin-1');">Turn off magnifier</button> <button onclick="var frame = Magic360.getCurrentFrame('spin-1'); alert('Current frame details: row='+frame.row+', column='+frame.column);">Get current frame</button> </div> </body> </html>