Smooth Image Zoom jQuery Plugin on Mouseover & Mouse Move – ZooMove

Looking for a affordable website?

GET STARTED
www.codingexpertz.com
Smooth Image Zoom jQuery Plugin on Mouseover & Mouse Move – ZooMove

File Size: 3145KB

Total Views: 338

Date Created:

Last Modified Date:

Official Website: Go to website

License: MIT

ZooMove is a very smooth and easy to implement image zoom jQuery plugin that allows zooming images automatically on mouseover. It also allows viewing details of a specific part of the images with mouse move. The plugin uses CSS3 transition on mouseover and mouse move so you can get a smooth experience while exploring the plugin.

Features:

  • Lightweight and easy to implement.
  • Supports on all modern devices and browsers.
  • Smooth transition enabled.
  • Dynamically zoom images with mouseover.
  • Built with jQuery and CSS3.

Install with npm

$ npm install zoomove --save

Install with bower

$ bower install zoomove --save

Install with yarn

$ yarn install zoomove

How to use it:

1. Include the Javascript zoomove.min.js at the bottom of the web page.

<script src="path/to/zoomove.min.js"></script>

2. Include the CSS zoomove.min.css in the header of the page.

<link rel="stylesheet" href="path/to/zoomove.min.css">

3. Add the basic HTML to the page.

<figure class="zoo-item" data-zoo-image="img/example.jpg"></figure>

4. Initialize the plugin and we’re ready to go.

$('.zoo-item').ZooMove();

Plugin’s default options:

Property Default Description
data-zoo-image The url of the photo to be displayed.
data-zoo-scale 1.5 (150%) Sets the zoom size that should be applied to the image.
data-zoo-move true Choose whether the image should move with the mouse move.
data-zoo-over false With ‘over’ it is possible to define whether the image may be above.
data-zoo-cursor false Define the cursor pointer or default.
data-zoo-autosize true Sets the size of the automatic image.

HTML Element

<figure
  class="zoo-item"
  data-zoo-image="[value]"
  data-zoo-scale="[value]"
  data-zoo-move="[value]"
  data-zoo-over="[value]"
  data-zoo-cursor="[value]"
  data-zoo-autosize="[value]"
  >
</figure>

JavaScript

$('.zoo-item').ZooMove({
   image: '[value]',
   scale: '[value]',
   move: '[value]',
   over: '[value]',
   cursor: '[value]',
   autosize: '[value]'
});

Leave a comment

Your email address will not be published. Required fields are marked *

STAYUPDATED

Receive all our future posts instantly in your inbox. Enter your email to enroll.