Magic Zoom™

Examples

Magic Zoom™ API

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. <!-- define Magic Zoom -->
  2. <a href="images/r1-red-3.jpg" class="MagicZoom" id="zoom" title="Cool bike!"><img src="images/r1-red-2.jpg"/></a> <br/>
  3.  
  4.  
  5. <!-- stop some particular Magic Zoom (by ID) -->
  6. <input type="button" onclick="MagicZoom.stop(document.getElementById('zoom'));" value="Stop zoom"/>
  7.  
  8. <!-- start some particular Magic Zoom (by ID) -->
  9. <input type="button" onclick="MagicZoom.start(document.getElementById('zoom'));" value="Start zoom"/>
  10.  
  11. <!-- update zoom manually (first approach) -->
  12. <script>
  13.     function blue(){
  14.         var zoom = document.getElementById('zoom'); //get the reference to our zoom object
  15.         // now apply new changes to our zoom (and only this zoom)
  16.         //  new settings passed in the last parameter to update() function
  17.         //  will only extend existing settings
  18.         MagicZoom.update(zoom, 'images/r1-blue-3.jpg', 'images/r1-blue-2.jpg', 'show-title: false');
  19.     }
  20. </script>
  21. <input type="button" onclick="blue();" value="Make it blue!"/>
  22.  
  23. <br/><br/>
  24.  
  25. <!-- update zoom manually (second approach) -->
  26. <script>
  27.     function green(){
  28.         var zoom = document.getElementById('zoom'); //get the reference to our zoom object
  29.         zoom.href = 'images/r1-black-3.jpg'; //change the big image
  30.         zoom.rel = 'drag-mode: true; zoom-height: 170px'; // enable zoom drag mode
  31.         zoom.firstChild.src = 'images/r1-black-2.jpg'; //change the small image
  32.         // refresh ALL zooms on the page
  33.         MagicZoom.refresh();
  34.     }
  35. </script>
  36. <input type="button" onclick="green();" value="Make it draggable!"/>
  37.  
  38. <!-- track zooming position -->
  39. <script>
  40.     function getCoords(){
  41.         var zoom = document.getElementById('zoom'); //get the reference to our zoom object
  42.         alert('Current zoom position is: x='+MagicZoom.getXY(zoom).x+', y='+MagicZoom.getXY(zoom).y);
  43.     }
  44. </script>
  45. <input type="button" onclick="getCoords();" value="Get coordinates (use drag mode)"/>