ZooMove: jQuery Plugin to Zoom Images on Hover

If you’ve ever browsed an e-commerce site you’ve expected seen a image zooming effect. You float a product print and that partial of a picture magnifies for a clearer view.

The ZooMove plugin is a good approach to replicate this effect on your site. It’s powered by jQuery, so we can get this adult using fast but most code.

ZooMove picturesZooMove pictures

ZooMove is totally giveaway and open source, accessible on GitHub for any extraordinary developers. It can be commissioned by npm, Bower, Yarn, or downloaded directly from CDNJS.

To set adult a ZooMove image, you’ll need three specific files in your page header:

  1. jQuery
  2. ZooMove CSS
  3. ZooMove JS

Both ZooMove files can be minified if we wish faster page loads. You could also mix a CSS record into your categorical stylesheet if that’s easier.

All a genuine sorcery happens in a HTML where we can set HTML5 data-* attributes for a opposite effects.

This lets we qualification your own tradition zooming effect formed on 4 opposite parameters:

  1. data-zoo-scale – defines a total wizz distance when hovering (e.g. 2.0 for 200%)
  2. data-zoo-move – defines either a picture moves along with a cursor
  3. data-zoo-over – defines a zoomed picture appear over a original
  4. data-zoo-cursor – defines a cursor point

A final fifth parameter lets we conclude what a new picture URL should be (if needed).

You can use ZooMove in all vital browsers, including IE9+. This plugin is widely supported and it offers one heck of a user experience.

Zoomove pluginZoomove plugin

If you’re looking for a simple hover-to-zoom library ZooMove is an glorious choice. It’s lightweight enough to run on any website and it’s powered by jQuery, so we won’t need to write as most formula to get it working.

Visit a main page to see it in movement and check out a support on GitHub to learn more.

Add Comment