Product Magnifier effect HTML CSS & JS

Hello Friends, in this blog, we will learn how to create a magnifying glass zoom effect on a particular image using a jQuery plugin called jQuery magnify. I have shared many snippets on HTML CSS, CSS animation examples, jQuery plugins implementation, JavaScript, etc before in this blog. Please make sure to check those out. Please follow the below video tutorial for a better understanding.

I hope you have watched the video and got some idea about the magnifying glass effect. The tutorial above is about the simple implementation of a jQuery plugin. I have given the plugin link in the video description box. Magnify plugin is a lightweight jQuery plugin that helps us to achieve magnifying glass zoom effect when we hover a particular image. This kind of effect is often seen in an E-Commerce Type of website. This whole procedure is straightforward. We have taken an 'a' tag where we linked the bigger version of the image we used in this project. The large image needs to have the same aspect ratio as the main image. Inside the 'a' tag, we placed the smaller version of the image with an id of the box and a class name of 'zoom'. We placed the image at the center using the CSS display table property. We also gave the body tag a display table-cell and vertical-align middle styling. We also gave the main image a fixed weight of 400px. Later downloaded the plugin and after extracting it, we added the CSS and js file of that plugin in our project. We also added the latest jQuery CDN. For initiating the plugin we took the script located in the plugin's GitHub page and placed it at the bottom of our project. Make sure to add the class name you used for the smaller image in HTML.

You May Also Like:

Product magnifier effect HTML CSS & JS [ Source Code ]:

For making this snippet, You have to create two files. One is HTML file with a .html extension and, the other one is CSS with a .css extension. If you want to keep the initiating script in a separate file, then you can create another js file with a .js extension. In this case, we placed the script at the bottom of the project. Link the external CSS in the HTML file and add the latest jQuery file as well. Please Copy the code from the code box below and paste them into your project.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Product magnifier effect HTML CSS & JS</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/css/magnify.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	
	<a href="https://i.postimg.cc/28SR1QQW/1.jpg"><img alt="" class="zoom" id="box" src="https://i.postimg.cc/bNVXkZgB/2.jpg"></a> 
	
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/js/jquery.magnify.min.js">
	</script> 
	<script>
	     $(document).ready(function() {
	           $('.zoom').magnify();
	       });
	</script>
</body>
</html>

ADD CSS:

 html {
 	width: 100%;
 	height: 100%;
 	display: table;
 }
 body {
 	width: 100%;
 	height: 100%;
 	display: table-cell;
 	text-align: center;
 	vertical-align: middle;
 	background: #edf3f3;
 }
 img {
 	border: none;
 }
 #box {
 	width: 100%;
 	max-width: 400px;
 	padding-bottom: 6em;
 }

I hope you have successfully implemented the jquery plugins. if you like this jquery plugin implementation snippet, then please subscribe to our channel and press the bell icon for future video recommendations. Please follow us on our social media profiles to stay connected with this blog. Thank you for your time.

Post a Comment

Post a Comment

About Us

Contact Form

Product Magnifier effect HTML CSS & JS

You might like

Post a Comment

Post a Comment

Contact Form