Jquery image zoom on mouseover example
In this post, we will provide a simple code snippet to zoom over an image using jQuery. Enlarging the image on hover creates a superior user interface in any web application. You can easily add a zoom effect to the image on mouseover with CSS and jQuery. This type of effect is widely used in web applications, like portfolio sites, e-commerce sites. It is useful in situations where we want to show the client subtleties on the image. There are several jQuery plugins available for zooming the image. Here, we have used the jQuery elevatezoom plugin.
jQuery image zoom using the elevatezoom plugin
The elevatezoom plugin is a jQuery Image zoom script, with lots of configurations, including window, lens, and inner zoom modes. It also has the ability to tint and ease. First, we need to download the elevatezoom plugin and include the JavaScript files. Here, we have loaded both JavaScript files.
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>Next, we need to set the id on the image element on which we want to zoom and provide the small image source on the src attribute and the large image source on data-zoom-image attribute for zooming.
<img id="img1" src="/images/small/image1.png" data-zoom-image="images/large/image1.jpg"/>Here is a basic example of a zooming image. On mouse hover, this elevatezoom() script method is called -
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Zoom Image on Mouse Hover</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/jquery.elevatezoom.js" type="text/javascript"></script>
</head>
<body>
<div>
<img id="zoomimg" src="/thumb/lily.jpg" data-zoom-image="large/lily.jpg"/>
</div>
<script type="text/javascript">
$(function() {
$("#zoomimg").elevateZoom();
});
</script>
</body>
</html>
jQuery different zooming effect
The elevatezoom plugin provides many configuration options to show different zooming effects, like Lens image zoom, Easing Zoom, Square Zoom, Tint zoom effect. Here, we have mentioned most of the different zooming effects.
jQuery Tint Image Zoom Effect
You can easily set tints for the zoom, you can set the color and opacity of the tint overlay to be any value.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Zoom Image on Mouse Hover</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/jquery.elevatezoom.js" type="text/javascript"></script>
</head>
<body>
<div>
<img id="zoomimg" src="/thumb/lily.jpg" data-zoom-image="large/lily.jpg"/>
</div>
<script type="text/javascript">
$("#zoomimg").elevateZoom({
tint:true,
tintColour:'#4deeff',
tintOpacity:0.6
});
</script>
</body>
</html>
jQuery Lens Effect Image Zooming
Using the lens image zooming effect, we can magnify the image -
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Zoom Image on Mouse Hover</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/jquery.elevatezoom.js" type="text/javascript"></script>
</head>
<body>
<div>
<img id="zoomimg" src="/thumb/lily.jpg" data-zoom-image="large/lily.jpg"/>
</div>
<script type="text/javascript">
zoomType : "lens",
lensShape : "round",
lensSize : 200
});
</script>
</body>
</html>
jQuery Easing Zoom effect
Using the elevatezoom plugin, we can use the configuration for default easing or a custom easing. By default, the amount of easing is 12 and we can set it to higher value for more and lower for less.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Zoom Image on Mouse Hover</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/jquery.elevatezoom.js" type="text/javascript"></script>
</head>
<body>
<div>
<img id="zoomimg" src="/thumb/lily.jpg" data-zoom-image="large/lily.jpg"/>
</div>
<script type="text/javascript">
easing : true,
easingDuration: 500
});
</script>
</body>
</html>
Related Articles
Django Pagination with Ajax and jQueryJavaScript display PDF in the browser using Ajax call
Submit a form data without page refresh using Ajax
Polling System using PHP, MySQL and Ajax
jQuery File upload progress bar with file size validation
Retrieve data from database without page refresh using Ajax
PHP review and rating script
jQuery loop over JSON result after AJAX Success
jQuery Ajax serialize form data example
Ajax live data search using jQuery PHP MySQL
Bootstrap modal popup example on page load
Simple star rating system using PHP, jQuery and Ajax
Image popup on page load using HTML and jQuery
Remove duplicates from array Javascript
How to reverse string in Javascript
Generate random numbers in JavaScript
Javascript window location