Magic Zoom Plus™

Examples

Magic Zoom Plus™ API

joesnet mobilejoe

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. <!-- define Magic Zoom Plus -->
  2. <a href="images/harley1c.jpg" id="zoom" title="Cool bike!" class="MagicZoomPlus"><img src="images/harley1b.jpg"/></a>
  3.  
  4. <br/>
  5.  
  6. <!-- stop some particular Magic Zoom (by ID) -->
  7. <input type="button" onclick="MagicZoomPlus.stop('zoom');" value="Stop zoom"/>
  8.  
  9. <!-- start some particular Magic Zoom (by ID) -->
  10. <input type="button" onclick="MagicZoomPlus.start('zoom');" value="Start zoom"/>
  11.  
  12. <br/><br/>
  13.  
  14. <!-- update zoom manually (first approach) -->
  15. <script>
  16.     function changeImages1(){
  17.         // apply new changes to our zoom (and only this zoom)
  18.         //  new settings passed in the last parameter to update() function
  19.         //  will only extend existing settings
  20.         MagicZoomPlus.update('zoom', 'images/harley2c.jpg', 'images/harley2b.jpg', 'show-title: false');
  21.     }
  22. </script>
  23. <input type="button" onclick="changeImages1();" value="Switch images"/>
  24.  
  25. <!-- update zoom manually (second approach) -->
  26. <script>
  27.     function changeImages2(){
  28.         var zoom = document.getElementById('zoom'); //get the reference to our zoom object
  29.         zoom.href = 'images/harley1c.jpg'; //change the big image
  30.         zoom.rel = 'zoom-height: 170px'; // enable zoom drag mode
  31.         zoom.firstChild.src = 'images/harley1b.jpg'; //change the small image
  32.         // refresh ALL zooms on the page
  33.         MagicZoomPlus.refresh();
  34.     }
  35. </script>
  36. <input type="button" onclick="changeImages2();" value="Switch images back"/>