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.

[intro_ad]

Plugin Overview and Preview

Plugin: zoomio
Author: dynamicdriverepo
Category: Zoom
Published: January 20, 2024
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 478 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
2,809
[ad_after_overview]

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();
});
[ad_after_artical]
About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...