Magic 360™

Examples

Callbacks

Buy now Get support

You can trigger events once all images have loaded by defining a function for the callback onready. This example opens a dialogue box once the spin is ready (Magic 360™ and images loaded).

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic 360&trade;: Callbacks</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.         <script type="text/javascript">
  9.             Magic360.options = {
  10.                 onready: function(spin) { logEvents('360 on a '+spin.id+' is ready'); },
  11.                 onspin: function(spin) { logEvents('Spin begins on a '+spin.id+' image'); },
  12.                 onzoomin: function(spin) { logEvents(''+spin.id+' image is zoomed in'); },
  13.                 onzoomout: function(spin) { logEvents(''+spin.id+' image is zoomed out'); }
  14.             }
  15.         </script>
  16.         <script type="text/javascript">
  17.             function logEvents(t) {
  18.                 var c= document.getElementById('console-window');
  19.                 c.innerHTML += '<br/>' + t;
  20.             }
  21.             function clearLog(){
  22.                 var c= document.getElementById('console-window');
  23.                 c.innerHTML = '';
  24.             }
  25.         </script>
  26.        
  27.     </head>
  28.     <body>
  29.        
  30.         <p>You can trigger events once all images have loaded by defining a function for the callback <strong>onready</strong>.
  31.             This example opens a dialogue box once the spin is ready (Magic 360™ and images loaded).
  32.         </p>
  33.         <div style="float: right;">
  34.             <div id="console-window" style="margin-top: 20px; border: 1px inset black; background: #ffffff; width: 300px; height: 350px; overflow: auto;"></div>
  35.             <input type="button" value="Clear" onclick="clearLog();">
  36.         </div>
  37.        <a id="shoe-spin" class="Magic360" href="images/shoe/shoe-800-01.jpg" data-magic360-options="filename:shoe-360-{col}.jpg; large-filename:shoe-800-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>
  38.        
  39.     </body>
  40. </html>