jQuery – Zoom images on mouse over with ZooMove

You have seen on e-commerce websites for display the details view of a product. The part of the image will zoom according to mouse movement.

You can also implement this on your own website to provide better user experience.

In this tutorial, I am using ZooMove jQuery plugin for zoom functionality. It is easy to implement and customizable.

jQuery - Zoom images on mouse over with ZooMove


Contents

  1. Download and include
  2. Setup
  3. Other Attributes and options
  4. Conclusion

 


 

1. Download and include

  • You can download this plugin from here .
  • Add CSS in page <head> section.
<link href='zoomove-master/dist/zoomove.min.css' rel='stylesheet' type='text/css'>
  • Include plugin script with the jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src='zoomove-master/dist/zoomove.min.js' type='text/javascript'></script>

 

2. Setup

HTML

Create <figure class="zoo-item">  element and specify your image source in data-zoo-image attribute.

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

Script

Call ZooMove() method on .zoo-item class.

NOTE – Either put the script after <figure > elements creation or put it at the end of the <body> or <html>.

<script type='text/javascript'>
 $('.zoo-item').ZooMove();
</script>

Demo

Hover on an Image. Open in new tab.


 

3. Other Attributes and options

There are some attributes and options for modifying the default functionality.

Attributes

  • data-zoo-image – Take image source.
  • data-zoo-scale – Specify the zoom size. The default is 1.5 (150%) . e.g. data-zoo-scale="5"
  • data-zoo-move –  The image will move with mouse movement or not. The default value is true. e.g. data-zoo-move="false".
  • data-zoo-over – Define whether the image may be above. The default value is false. e.g. data-zoo-over="true".
  • data-zoo-cursor – Set either pointer or default cursor. The defatlt values is false. e.g. data-zoo-cursor="true".

Example

<figure class="zoo-item" 
  data-zoo-image="image.jpg" 
  data-zoo-scale="5"
  data-zoo-move="true"
  data-zoo-over="true"
  data-zoo-cursor="true"
></figure>

Options

You can also do customization with options in the script.

Example

Here, I am specifying the same values as above.

$('.zoo-item').ZooMove({
 image: 'image.jpg',
 scale: '5',
 move: 'true',
 over: 'true',
 cursor: 'true'
});

Demo

All 3 images have different-different values on data attribute.

  • Image 1 – It has default values.
  • Image 2 –  Attributes has following values-
data-zoo-move="false" data-zoo-over="true"
  • Image 3 –  Attributes has following values –
data-zoo-scale="3" data-zoo-move="true" data-zoo-over="false"

Hover on each of the images to see the difference. Open in new tab.


 

4. Conclusion

This jQuery plugin enlarges the image on mouseover for this you need to specify your image source in the <figure class='zoo-item'> element using data attribute and call ZooMove() method on class='zoo-item'.

For more customization use available attributes or options.

Browser support –

  • Chrome – 42+
  • Firefox – 41+
  • IE – 9+
  • Opera – 29+
  • Safari – 9+
  • Edge – 12+

Related Post

Spread the love

Be First to Comment

Leave a Reply

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