Jquery - Zoom product image on hover
- Last updated: Nov 3, 2023
- Views: 760
- Author: Admin
Hello colleagues.
A simple jquery image zoom plugin that adds a zoom effect to any image on your site. Recommended for use on e-commerce sites and blog images.
Requirements.
Include jquery library.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
Connect the plugin itself.
<script type="text/javascript" src="zoom.js"></script>
HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Image Zoom On Hover</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script type="text/javascript" src="zoom.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Product Image Zoom On Hover</h1>
<div class="cn f a j">
<div class="wp f">
<aside>
<div class="zoom">
<div class="original">
<img src="image1.png" id="target">
</div>
<div class="viewer">
<img src="image1.png">
</div>
<div class="magnifier"></div>
</div>
</aside>
</div>
</div>
</body>
</html>
CSS code.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.f {
display: flex;
}
.a {
align-items: center;
}
.j {
justify-content: center;
}
.cn {
height: 100vh;
}
.wp {
--t: 900px;
width: var(--t);
}
.wp aside {
width: 50%;
}
.wp aside:last-child {
padding: 0 0 0 10px;
}
.mgt {
margin-top: 10px;
}
/* Zoom styles */
.zoom, .original {
position: relative;
}
.zoom {
display: inline-block;
}
.original {
cursor: crosshair;
}
#target {
width: calc(var(--t) / 2);
}
.zoom .viewer {
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
.zoom .viewer img {
position: absolute;
}
.magnifier {
position: absolute;
background: #000;
opacity: 0.7;
top: 0;
left: 0;
}
.magnifier, .viewer {
display: none;
}
.original:hover ~ div {
display: block;
}
.original::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
JavaScript code.
$(document).ready(function(){
var l = $('#target').zoom(5);
$('input[type="range"]').on('change', function () {
l.setZoom(this.value);
});
});
Thank you all, I hope my article was of some help to you.