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.
To set up a ZooMove image, you’ll need three specific files in your page header:
- 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 cursor
data-zoo-over– defines the zoomed image appear over the original
data-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.