Magic Zoom on responsive websites

I love Magic Zoom – the ideal tool for letting your customers zoom into the details on your product images.
Its relatively inexpensive and easy to integrate into most ecommerce platforms.
http://www.magictoolbox.com/magiczoom/

I had installed recently with great success on www.handprintedgifts.com – which is a responsive online shopping site built with ZenCart.
However the client noticed that the Magic Zoom was behaving oddly on mobile devices (ie the zoomed in image was appearing off screen and couldn’t be seen)
So they asked to turn this off on mobile devices.

Even though the documenattion for Magic Zoom was extensive I couldn’t see any direct good /evil switch to make this behave properly in responsive sites. So I added the following block of javascript to the bottom of the product page to turn of MagicZoom when the screen width is lower than my responsive breakpoint:

//new code 20-02-14 to check if mobile & turn off magiczoom
var ww = document.body.clientWidth;
if (ww < 750) {
  //mobile only
  MagicZoom.options = {
     'disable-zoom': true
   };
 }

Note how this is not included within a jQuery ready or onload event.
You might also want to add the following to your css so that the "Move your mouse over to zoom" message it hidden in mobile devices

/* Mobile Grid and Overrides ---------------------- */
@media only screen and (max-width: 767px) {
   .MagicToolboxMessage{display:none};
}