Magnify

Adds magnifying glass "zoom" functionality to images via the Magnify jQuery plugin.

Simply add the js-Magnify class to an <img> element and specify the larger image size via a data-magnify-src attribute.

Magnification will be triggered when you mouse over the image. Magnification is not triggered when you interact with an image via a touch screen, because the magnification interfered with swiping and scrolling.

<img class="js-Magnify" src="/images/prototypes/tcs/generator-lifestyle-small.jpg"
  data-magnify-src="/images/prototypes/tcs/generator-lifestyle.jpg">

Alternatively, you can forego the data-magnify-src attribute by linking the image to the larger version.

<a href="/images/prototypes/tcs/generator-lifestyle.jpg">
  <img class="js-Magnify" src="/images/prototypes/tcs/generator-lifestyle-small.jpg">
</a>