Magic Zoom™

Examples

Magic Zoom™ API & Callbacks

Buy now Get support

The API allows more advanced customisation of Magic Zoom™. Here are some examples of what you can do. Email us if you have questions.




Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom: Magic Zoom&#8482; API &amp; Callbacks</title>
  4.        
  5.         <!-- link to magiczoom.css file -->
  6.         <link href="magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
  7.         <!-- link to magiczoom.js file -->
  8.         <script src="magiczoom/magiczoom.js" type="text/javascript"></script>
  9.         <!-- Magic Zoom options: define 'onready' callback -->
  10.         <script type="text/javascript">
  11.             MagicZoom.options = {
  12.                 'onready': function(/* id of the <a> */id, /* whether zoom instance is started or updated */ updated) {
  13.                     logEvents('Zoom on &lt;a id="'+id+'"&gt; is ready ('+(updated?'updated': 'started')+')');
  14.                 }
  15.             }
  16.         </script>
  17.         <script type="text/javascript">
  18.             function logEvents(t) {
  19.                 var c= document.getElementById('console-window');
  20.                 c.innerHTML += '<br/>' + t;
  21.             }
  22.             function clearLog(){
  23.                 var c= document.getElementById('console-window');
  24.                 c.innerHTML = '';
  25.             }
  26.         </script>
  27.  
  28.        
  29.     </head>
  30.     <body>
  31.  
  32.  
  33.         <p>The API allows more advanced customisation of Magic Zoom&#8482;. Here are some examples of what you can do. <a href="mailto:support@magictoolbox.com">Email us</a> if you have questions.</p>
  34.         <div style="float: right;">
  35.             <div id="console-window" style="border: 1px inset black; background: #ffffff; width: 300px; height: 243px; overflow: auto;"></div>
  36.             <input type="button" value="Clear" onclick="clearLog();">
  37.         </div>
  38.  
  39.         <!-- define Magic Zoom -->
  40.         <a href="images/r1-red-3.jpg" class="MagicZoom" id="zoom" title="Cool bike!"><img src="images/r1-red-2.jpg"/></a> <br/>
  41.  
  42.  
  43.         <!-- stop some particular Magic Zoom (by ID) -->
  44.         <input type="button" onclick="MagicZoom.stop('zoom');" value="Stop zoom"/>
  45.         <!-- start some particular Magic Zoom (by ID) -->
  46.         <input type="button" onclick="MagicZoom.start('zoom');" value="Start zoom"/>
  47.  
  48.         <!-- start some particular Magic Zoom (by ID) -->
  49.         <input type="button" onclick="MagicZoom.zoomIn('zoom');" value="Zoom In"/>
  50.         <!-- zoom out particular Magic Zoom (by ID) -->
  51.         <input type="button" onclick="MagicZoom.zoomOut('zoom');" value="Zoom out"/>
  52.  
  53.         <br/><br/>
  54.  
  55.         <!-- update zoom manually (first approach) -->
  56.         <input type="button" onclick="MagicZoom.update('zoom', 'images/r1-blue-3.jpg', 'images/r1-blue-2.jpg', 'show-title: false; drag-mode: false');" value="Make it blue!"/>
  57.  
  58.         <!-- update zoom manually (second approach) -->
  59.         <script type="text/javascript">
  60.             function green(){
  61.                 var zoom = document.getElementById('zoom'); //get the reference to our zoom object
  62.                 zoom.href = 'images/r1-black-3.jpg'; //change the big image
  63.                 zoom.rel = 'drag-mode: true; zoom-height: 130px; zoom-position: top; zoom-distance: 0;'; // enable zoom drag mode
  64.                 zoom.firstChild.src = 'images/r1-black-2.jpg'; //change the small image
  65.                 // refresh ALL zooms on the page
  66.                 MagicZoom.refresh();
  67.             }
  68.         </script>
  69.         <input type="button" onclick="green();" value="Drag mode"/>
  70.  
  71.         <!-- track zooming position -->
  72.         <script type="text/javascript">
  73.             function getCoords(){
  74.                 alert('Current zoom position is: x='+MagicZoom.getXY('zoom').x+', y='+MagicZoom.getXY('zoom').y);
  75.             }
  76.         </script>
  77.         <input type="button" onclick="getCoords();" value="Get coordinates (use drag mode)"/>
  78.  
  79.     </body>
  80. </html>