//   Nov 4, 2016

Polymer Element for zooming image on mouseover - <polymer-zoomove>

Saket Kumar

Zooming-in on images with mouse hover is a common feature used on E-commerce websites to let buyers see details of the products. We had a similar requirement on a polymer project for which we integrated the Zoomove jQuery plugin into polymer to use it as reusable component and now open sourcing it. 

Demo - https://qed42.github.io/polymer-zoomove/

Github project -- https://github.com/qed42/polymer-zoomove 

Using zoomove-polymer Element in your Project

Install this element using bower in your project 

$ bower install zoomove-polymer --save-dev

or you can grab the element  from the github from here - https://github.com/qed42/polymer-zoomove  and place it in the components for referencing.

Now you can add the element in your html page using html imports

<link rel="import" href="../polymer-zoomove.html">

And in your HTML you can now use the tag as follows,



Available attributes for this elements are:

  1. image-path - The url of the photo to be displayed.
  2. image-scale - Sets the zoom size that should be applied to the image.
  3. image-move - Choose whether the image should move with the mouse move
  4. image-over - With 'over' it is possible to define whether the image may be above
  5. image-cursor - Define the cursor pointer or default

Looking for a Drupal partner?

We are drupal 8 ready