ZooMove jQuery Plugin to Zoom Images on Hover

Nowadays, zooming an image is very important when surfing the internet. Especially an eCommerce store, this is the most common feature and every user needs this to may see the clear view of any product image. There are many plugins you may find on the internet. It is very difficult to mention that which one is better than other. All are fantastic and may have different features. But today we discuss a very simple and easy to use the jQuery plugin to make a zooming effect on mouse hover called ZooMove.

ZooMove Overview

This ZooMove is available on GitHub and completely free and open source. You can get it easily and install and implement without writing much code.

It’s a plugin developed with jQuery, that allows to dynamically zoom images with mouseover, and view details on mouse move.

Download

Firstly, you have to download the plugin from their repository and get the latest release from here. OR you can download from Node Package Manager (npm), bower or yarn.

Goto terminal from OSX or any Linux distro then write the following command and get it. You can also install via cmd from your Windows machine.

npm

bower

yarn

You can also get it from CDN via CDNJS. Get the CSS and JS individually via the following URLs.
CSS: https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.2.1/zoomove.min.css
JavaScript https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.2.1/zoomove.min.js

You can also download the zip package from here.

Installation

After downloading this package, you need to add the ZooMove CSS and ZooMove JavaScript file on your document header. Remember that, this package has jQuery dependency, so make sure you have a jQuery plugin for those two files.

Setup

Firstly, include the following scripts which are located in dist folder.

Example

Using HTML5 data attributes, you can set the different effects by this plugin on your targeted image.

Browser Support

  • Microsoft EDGE 12+
  • Internet Explorer 9+
  • Mozilla Firefox 41+
  • Google Chrome 42+
  • Opera 29+
  • Safari 9+

How to Use

Just simple to use. ZooMove provides some data attributes.

data-zoo-image

This attribute takes the value which is the URL of your image file to be displayed.

data-zoo-scale

This attribute takes the value which makes the image scaled, that means how will be the size when the image will be zoom on mouse hover. The default value is 1.5, which means 150%.

data-zoo-move

This attribute takes the value which is Boolean and the default is true. That means if the value is true, the image will be moved on mouse move.

data-zoo-over

This attribute takes the value which is Boolean and the default is false. That means if true, the image will appear on the original image.

data-zoo-cursor

This attribute takes the value which is Boolean and the default is false. It actually defines the cursor pointer on an image.

Example

Here is the sample example, you can use this plugin with this following code.

ZooMove jQuery Plugin to Zoom Images on Hover

Images by lorempixel.

HTML Code

JavaScript Code

So if you are looking for a simple image zooming library on mouse hover, we think ZooMove is the best choice for its lightweight and less code features.

Thanks for being with cssanimation.io