Zoom Image on Mouseover using jQuery – zoomio

The zoomio is a lightweight and simple plugin for jQuery that helps you to make zoom image on mouseover. It allows you to zoom an image with two different sizes. You just need to place a small size (thumbnail) image in your HTML page, then this plugin zoom image from its large src. The plugin gets the zoomed version of an image from another fullsize image using HTML5 data attribute.

Moreover, this plugin can be used to scale any image on hover / mouseover. You can highly customize this plugin with its options and additional CSS.

Plugin Overview and Preview

Plugin: zoomio
Author: dynamicdriverepo
Category: Zoom
Published: 2 months ago
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 478 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
220

How to Create Zoom Image On Mouseover Using Jquery

1. The zoomio makes it easy to create zoom image on mouseover using jQuery. So, load the jQuery JavaScript library into your web project.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. Similarly, include plugin’s CSS and Js file in your webpage.

<!-- zoomio CSS -->
<link rel="stylesheet" href="css/zoomio.css">
<!-- zoomio JS -->
<script src="js/zoomio.js"></script>

3. Place your image in HTML with small size and put the fullsize image URL in data-largesrc:

     <div class="container">
         <img class="sampleimage" src="images/carandgirl.jpg" data-largesrc="images/carandgirl.jpg" /> 
         <img class="sampleimage" src="images/table.jpg" data-largesrc="images/table.jpg" /> 
     </div>

4. At the end, call the zoomio plugin in jQuery document ready function to active the zoom effect on hover.

$(document).ready(function(){
	$('.sampleimage').zoomio();
});