ZooMove: jQuery Plugin to Zoom Images on Hover
If you’ve ever browsed an e-commerce site you’ve likely seen the image zooming effect. You hover a product photo and that part of the image magnifies for a clearer view.
The ZooMove plugin is a great way to replicate this effect on your site. It’s powered by jQuery, so you can get this up & running quickly without much code.
Read Also: How to Create Pure CSS onClick Image Zoom Effect
ZooMove is completely free and open source, available on GitHub for any curious developers. It can be installed through npm, Bower, Yarn, or downloaded directly from CDNJS.
To set up a ZooMove image, you’ll need three specific files in your page header:
- jQuery
- ZooMove CSS
- ZooMove JS
Both ZooMove files can be minified if you want faster page loads. You could also combine the CSS file into your main stylesheet if that’s easier.
All the real magic happens in the HTML where you can set HTML5 data-* attributes for the different effects.
This lets you craft your own custom zooming effect based on four different parameters:
data-zoo-scale– defines the total zoom size when hovering (e.g. 2.0 for 200%)data-zoo-move– defines whether the image moves along with the cursordata-zoo-over– defines the zoomed image appear over the originaldata-zoo-cursor– defines the cursor point
A final fifth parameter lets you define what the new image URL should be (if needed).
You can use ZooMove in all major browsers, including IE9+. This plugin is widely supported and it offers one heck of a user experience.
If you’re looking for a simple hover-to-zoom library ZooMove is an excellent choice. It’s lightweight enough to run on any website and it’s powered by jQuery, so you won’t need to write as much code to get it working.
Visit the main page to see it in action and check out the documentation on GitHub to learn more.