| # 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: <html> <head> <title>Magic 360&trade;: Callbacks</title> <link rel="stylesheet" type="text/css" href="magic360/magic360.css" /> <script type="text/javascript" src="magic360/magic360.js"></script> <script type="text/javascript"> Magic360.options = { onready: function(spin) { logEvents('360 on a '+spin.id+' is ready'); }, onspin: function(spin) { logEvents('Spin begins on a '+spin.id+' image'); }, onzoomin: function(spin) { logEvents(''+spin.id+' image is zoomed in'); }, onzoomout: function(spin) { logEvents(''+spin.id+' image is zoomed out'); } } </script> <script type="text/javascript"> function logEvents(t) { var c= document.getElementById('console-window'); c.innerHTML += '<br/>' + t; } function clearLog(){ var c= document.getElementById('console-window'); c.innerHTML = ''; } </script> </head> <body> <p>You can trigger events once all images have loaded by defining a function for the callback <strong>onready</strong>. This example opens a dialogue box once the spin is ready (Magic 360™ and images loaded). </p> <div style="float: right;"> <div id="console-window" style="margin-top: 20px; border: 1px inset black; background: #ffffff; width: 300px; height: 350px; overflow: auto;"></div> <input type="button" value="Clear" onclick="clearLog();"> </div> <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> </body> </html>