Magic Zoom Plus™

Examples

Magic Zoom Plus™ API

Buy now Get support

The API allows more advanced customisation of Magic Zoom Plus™. 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 Plus: Magic Zoom Plus&trade; API</title>
  4.        
  5.         <!-- link to magiczoom.css file -->
  6.         <link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
  7.         <!-- link to magiczoom.js file -->
  8.         <script src="magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
  9.         <script type="text/javascript">
  10.             MagicZoomPlus.options = {
  11.                 'expand-size': 'width=480',
  12.                 'expand-position': 'top=0, left=0',
  13.                 'background-opacity': 0,
  14.                 'keep-thumbnail': false,
  15.  
  16.                 'onready': function(/* id of the <a> */id, /* whether zoom instance is started or updated */ updated) {
  17.                     logEvents('Zoom on &lt;a id="'+id+'"&gt; is ready ('+(updated?'updated': 'started')+')');
  18.                 }
  19.             }
  20.         </script>
  21.  
  22.         <script type="text/javascript">
  23.             function logEvents(t) {
  24.                 var c= document.getElementById('console-window');
  25.                 c.innerHTML += '<br/>' + t;
  26.             }
  27.             function clearLog(){
  28.                 var c= document.getElementById('console-window');
  29.                 c.innerHTML = '';
  30.             }
  31.         </script>
  32.        
  33.     </head>
  34.     <body>
  35.        
  36.         <p>The API allows more advanced customisation of Magic Zoom Plus&trade;. Here are some examples of what you can do. <a href="mailto:support@magictoolbox.com">Email us</a> if you have questions.</p>
  37.         <div style="float: right;">
  38.             <div id="console-window" style="border: 1px inset black; background: #ffffff; width: 300px; height: 267px; overflow: auto;"></div>
  39.             <input type="button" value="Clear" onclick="clearLog();">
  40.         </div>
  41.  
  42.         <!-- define Magic Zoom Plus -->
  43.         <a href="images/harley1c.jpg" id="zoom" title="Cool bike!" class="MagicZoomPlus"><img src="images/harley1b.jpg"/></a>
  44.  
  45.         <br/>
  46.  
  47.         <!-- Stop some particular Magic Zoom Plus image (by ID) -->
  48.         <input type="button" onclick="MagicZoomPlus.stop('zoom');" value="Stop Magic Zoom Plus&trade; on an image"/>
  49.  
  50.         <!-- Start some particular Magic Zoom Plus image (by ID) -->
  51.         <input type="button" onclick="MagicZoomPlus.start('zoom');" value="Start Magic Zoom Plus&trade; on an image"/>
  52.         <br/>
  53.  
  54.         <!-- Zoom in  particular Magic Zoom Plus image (by ID) -->
  55.         <input type="button" onclick="MagicZoomPlus.zoomIn('zoom');" value="Zoom in"/>
  56.  
  57.         <!-- Zoom out particular Magic Zoom Plus image (by ID) -->
  58.         <input type="button" onclick="MagicZoomPlus.zoomOut('zoom');" value="Zoom out"/>
  59.  
  60.         <!-- Expand some particular Magic Zoom Plus image (by ID) -->
  61.         <input type="button" onclick="MagicZoomPlus.expand('zoom');" value="Expand image"/>
  62.  
  63.         <!-- Restore some particular Magic Zoom Plus image (by ID) -->
  64.         <input type="button" onclick="MagicZoomPlus.restore('zoom');" value="Restore image"/>
  65.         <br/>
  66.  
  67.         <!-- update zoom manually (first approach) -->
  68.         <script>
  69.             function changeImages1(){
  70.                 // apply new changes to our zoom (and only this zoom)
  71.                 //  new settings passed in the last parameter to update() function
  72.                 //  will only extend existing settings
  73.                 MagicZoomPlus.update('zoom', 'images/harley2c.jpg', 'images/harley2b.jpg', 'show-title: false');
  74.             }
  75.         </script>
  76.         <input type="button" onclick="changeImages1();" value="Switch images"/>
  77.  
  78.         <!-- update zoom manually (second approach) -->
  79.         <script>
  80.             function changeImages2(){
  81.                 var zoom = document.getElementById('zoom'); //get the reference to our zoom object
  82.                 zoom.href = 'images/harley1c.jpg'; //change the big image
  83.                 zoom.rel = 'zoom-height: 170px'; // enable zoom drag mode
  84.                 zoom.firstChild.src = 'images/harley1b.jpg'; //change the small image
  85.                 // refresh ALL zooms on the page
  86.                 MagicZoomPlus.refresh();
  87.             }
  88.         </script>
  89.         <input type="button" onclick="changeImages2();" value="Switch images back"/>
  90.  
  91.        
  92.     </body>
  93. </html>