Optimising Magic Zoom for Mobile Devices

I guess the best and most used image zoom plugin for Magento is Magic Zoom. Today I had to optimise the Magic Zoom functionality so that it works nicely on mobile devices. They say that the plugin is responsive out of the box, although I do not really know what exactly is responsive – I definitely had issues on mobile devices. In any case, the quick and awesome support helped me with my problem and told me that they release a new version with „much more improved behavior on mobile device“ next month.

My customer used the functionality to show a zoom overlay on the right-hand side of the image. Of course this overlay should be as big as possible for large devices. The problem is that the overlay runs out of the viewport for smaller devices. Hence, my idea was:

1. Use a big overlay on the right-hand side on large devices.
2. Use a smaller overlay on the right-hand side on smaller devices.
3. Use an inner zoom on really small devices (the image is zoomed in the same container and not in a separate container).

The first point is easy as we can easily configure this functionality in the Magic Zoom configuration in the Magento backend. The second point can be solved via some CSS:

@media screen and (max-width: 1199px) {
    .MagicBoxShadow {
        height: 350px !important;
        width: 350px !important;
    }
}

Now comes the trickier part with which the Magic Zoom support has helped:

<script type="text/javascript">
if (window.matchMedia && window.matchMedia('(max-width: 979px)').matches && MagicZoom !== undefined) {
    MagicZoom.options['zoom-position'] = 'inner';
    MagicZoom.refresh();
} else if (window.matchMedia && window.matchMedia('(min-width: 980px)').matches && MagicZoom !== undefined) {
    MagicZoom.options['zoom-position'] = 'right';
    MagicZoom.refresh();
}
</script>

If you build your theme on top of Magento’s rwd theme or if you use enquire.js anyway, you can also use enquire for the same functionality:

<script type="text/javascript">
if ($j('.MagicToolboxContainer').length && MagicZoom !== undefined) {
    enquire.register('screen and (max-width: 979px)', {
        match: function () {
            MagicZoom.options['zoom-position'] = 'inner';
            MagicZoom.refresh();
        },
        unmatch: function () {
            MagicZoom.options['zoom-position'] = 'right';
            MagicZoom.refresh();
        }
    });
}
</script>

Mind that you use have to use MagicZoomPlus instead of MagicZoom if you use the plus version.