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.
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,
<polymer-zoomove image-path="http://lorempixel.com/600/600/animals/" image-cover="false"> </polymer-zoomove> <polymer-zoomove image-path="http://lorempixel.com/600/600/animals/" image-scale="5"> </polymer-zoomove> <polymer-zoomove image-path="http://lorempixel.com/600/600/animals/" image-cover="true"> </polymer-zoomove>
Available attributes for this elements are:
- image-path - The url of the photo to be displayed.
- image-scale - Sets the zoom size that should be applied to the image.
- image-move - Choose whether the image should move with the mouse move
- image-over - With 'over' it is possible to define whether the image may be above
- image-cursor - Define the cursor pointer or default