Magic Zoom™

Examples

Magic Zoom™ API

Buy now  £29 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. <!-- 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('zoom');" value="Stop zoom"/>
  7.  
  8. <!-- start some particular Magic Zoom (by ID) -->
  9. <input type="button" onclick="MagicZoom.start('zoom');" value="Start zoom"/>
  10.  
  11. <!-- start some particular Magic Zoom (by ID) -->
  12. <input type="button" onclick="MagicZoom.show('zoom');" value="Show zoom"/>
  13.  
  14. <!-- update zoom manually (first approach) -->
  15. <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!"/>
  16.  
  17. <br/><br/>
  18.  
  19. <!-- update zoom manually (second approach) -->
  20. <script type="text/javascript">
  21.     function green(){
  22.         var zoom = document.getElementById('zoom'); //get the reference to our zoom object
  23.         zoom.href = 'images/r1-black-3.jpg'; //change the big image
  24.         zoom.rel = 'drag-mode: true; zoom-height: 170px'; // enable zoom drag mode
  25.         zoom.firstChild.src = 'images/r1-black-2.jpg'; //change the small image
  26.         // refresh ALL zooms on the page
  27.         MagicZoom.refresh();
  28.     }
  29. </script>
  30. <input type="button" onclick="green();" value="Drag mode"/>
  31.  
  32. <!-- track zooming position -->
  33. <script type="text/javascript">
  34.     function getCoords(){
  35.         alert('Current zoom position is: x='+MagicZoom.getXY('zoom').x+', y='+MagicZoom.getXY('zoom').y);
  36.     }
  37. </script>
  38. <input type="button" onclick="getCoords();" value="Get coordinates (use drag mode)"/>