Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughPolymer Element for zooming image on mouseover -
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="https://www.qed42.com/blog/polymer-zoomove/../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
About Drupal Sun
Drupal Sun is an Evolving Web project. It allows you to:
- Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
- Facet based on tags, author, or feed
- Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
- View the entire article text inline, or in the context of the site where it was created
See the blog post at Evolving Web